Digital Grin Photography Forum - Dropdown Navbar help thread

Digital Grin Photography Forum (http://www.dgrin.com/index.php)

- SmugMug Customization (http://www.dgrin.com/forumdisplay.php?f=31)

- - Dropdown Navbar help thread (http://www.dgrin.com/showthread.php?t=168571)

sorry for entering wrong thread, my mistake. :(
thank you for your reply Allen. yes it is simple nav bar without drops.
can you little more help me here if you can direct me how can I avoid from adding spaces at the top of the pag if I insist on vertical nav bar ?

Quote:

Originally Posted by ercakir (Post 1689820)

I don't see anyway to do this without interfering with your gallery photos.

I cannot figure it out. I followed the instructions for creating the regular menu. Maybe it's the CSS. I really do not know. Please help. I am trying to add a submenu to my galleries button for my nature and food photography.

http://www.joshharrisonphotography.net

Quote:

Originally Posted by photobyjoshua (Post 1689925)

I see no html or CSS for a drop menu. :scratch

Vertical Nav Bar: How do I shift my thumbnails over?

I am looking for a vertical navigation bar that does not interfere with the interface of SM. I have one on the site I am designing (idahostateu.smugmug.com). However, at the moment, it interferes with the thumbnails and various other parts of my site depending on the screen size and how zoomed in the viewer is. A temporary fix was turning off the stretch option which centered most of everything in the center, however this doesn't fix all the problems. On smaller screens it is a real problem. What I want is for my navigation to have a defined area that nothing will interfere with. See examples below.

Here is the code I am currently using:

#navcontainer {
margin: 14px 0px 0px 0px; /* top right bottom left */
width: 210px !important;
position: absolute;
left: 100px;
top:70px;
font-family: arial, sanserif;
color: #999999 !important;
font-size: 16px;
font-weight: bold;
letter-spacing:1px;
z-index:99;

Here are illustrations of what I am looking for.

HOMEPAGE:http://idahostateu.smugmug.com/photo...-bG3pn5n-S.jpg

Gallery Pages: http://idahostateu.smugmug.com/photo...-QLg2pPQ-S.jpg

Any help would be tremendously appreciated!!http://dgrin.com/images/smilies/iloveyou.gif http://dgrin.com/images/smilies/iloveyou.gif

Quote:

Originally Posted by BSB (Post 1690968)

Very difficult to do especially for any Smugmug style galleries. I would post this in a new thread,
although I'm seem this before, and not in the dropdown nav thread. I have no idea without a whole
lot of experimenting, sorry.

Quote:

Originally Posted by Allen (Post 1690998)

Thanks for looking. Is there a way that I can set the min/max zoom level? If they are zoomed out enough, problem solved.

Quote:

Originally Posted by BSB (Post 1691012)

Thanks for looking. Is there a way that I can set the min/max zoom level? If they are zoomed out enough, problem solved.

"min/max zoom level" of what? Browser? No way to control others browser zoom.

Quote:

Originally Posted by Allen (Post 1635557)

...I also do not see the javascript that needs to be added to create the galleries page.
http://dgrin.smugmug.com/gallery/2160039

I went to that link, and put this in my bottom javascript:

Code:

function hasPath(sPath)

{

re = new RegExp("\/" + sPath + "(\/|$)");

return re.test(window.location)

} 



if (hasPath("galleries"))

YD.addClass(document.body, "galleries");

That link said this:

Quote:

Now we have your 'normal' homepage which is accessible at XXXXX.smugmug.com and your 'duplicate' homepage which is accessible at XXXXX.smugmug.com/galleries

I then added the destination in my menu to take me to galleries from the menu. Here is a snippet of that code:

Code:

<div id="navcontainer">

  <ul>

        <li><a href="/">Home</a></li>

        <li><a href="http://shuttermaster.co/galleries">Galleries</a></li>

        <li><a href="#">Information</a></li>

        <li><a href="#">About Me</a></li>

        <li><a href="#">Guestbook</a></li>

  </ul>

</div>

But clicking Galleries doesn't take me to galleries.

In the next section of the link you referenced , it said to add this CSS (although it didn't appear it is needed to simply see xxx.smugmug.com/galleries) but I added it anyway, and I still cannot see the galleries.

Code:

.homepage #galleriesBox,

.homepage #categoriesBox,

.homepage #featuredBox {

display: none;

}



.galleries #bioBox {

display: none;

}



.galleries #galleriesBox,

.galleries #categoriesBox,

.galleries #featuredBox {

display: block;

}

One note: I do not have 'show galleries' checked on my home page. Do I need to do that, then put in the other code that turns it off in the CSS? I don't mind them being there when I'm logged in, but don't want them there when logged out. I want visitors to see galleries only if they click the menu.

I"m going to continue on other aspects of the menu, per the examples in this section. Thanks so much for the post on this.

Quote:

Originally Posted by 56Kruiser (Post 1695055)

I went to that link, and put this in my bottom javascript:

Code:

function hasPath(sPath)

{

re = new RegExp("\/" + sPath + "(\/|$)");

return re.test(window.location)

} 



if (hasPath("galleries"))

YD.addClass(document.body, "galleries");

That link said this:

I then added the destination in my menu to take me to galleries from the menu. Here is a snippet of that code:
...
In the next section of the link you referenced , it said to add this CSS (although it didn't appear it is needed to simply see xxx.smugmug.com/galleries) but I added it anyway, and I still cannot see the galleries.
...
One note: I do not have 'show galleries' checked on my home page. Do I need to do that, then put in the other code that turns it off in the CSS? I don't mind them being there when I'm logged in, but don't want them there when logged out. I want visitors to see galleries only if they click the menu.

I"m going to continue on other aspects of the menu, per the examples in this section. Thanks so much for the post on this.

First thing is your domain is not set up correctly, your site opens in a frame.

I see none of the code on the site. You also have to turn on every box you want to see under the
homepage layout button.

Quote:

Originally Posted by Allen (Post 1695079)

Thanks. I just learned from someone else too about my domain not being right. I had my domain provider forward it, which is not supported. I don't think I can change it based on the preferences here until Monday, but I will get that done, and hopefully will be back on track.

Regarding the code, when it wasn't working, I took it back out.

Thanks for your reply.

Allen...great tutorial. Many thanks. Got mine working. Its not complete, but I think I can get it going fine.

I do have a question. When I first got it set up, I had the menu under my header at the top. I'm thinking maybe it would look better if I have it at the very top. I was able to get it there, but the drop downs must be dropping down behind the header, as I don't see them at all. I'll post the code below when it is like that. But due to that issue, my live site will have the NAV back under the header.

Here is what the screen looks like when at top:

http://i132.photobucket.com/albums/q...ser_56/Top.jpg

Here is my code:

Custom Header

Code:

<div class="menu">

  <ul>

                <li><a class="drop" href="Link">Home

                <!--[if gte IE 7]><!--></a><!--<![endif]-->

                <!--[if lte IE 6]><table><tr><td><![endif]-->

                <ul>

                    <li><a href="<a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>

                    <!--<li><a href="Link">Drop 2</a></li>

                    <li><a href="Link">Drop 3</a></li>-->

                </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

            </li>

        <li><a href="#">Portfolio</a></li>

                <li><a class="drop" href="http://shuttermaster.co/galleries">Galleries

                        <!--[if gte IE 7]><!--></a><!--<![endif]-->

                        <!--[if lte IE 6]><table><tr><td><![endif]-->

                        <ul>        

                                <li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>

                                <!--<li><a href="Link">Drop 2</a></li>

                                <li><a href="Link">Drop 3</a></li>-->

                        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->

                </li>

        <li><a href="#">About Me</a></li>

        <li><a href="#">Guestbook</a></li>

  </ul>

</div> 



<div style="clear: both;"></div>







<div id="myHeader">

<div id="myLogo"></div>

<div id="myConame"></div>

<div id="myBanner"></div>

</div>

CSS

Code:

#myHeader {

    background: url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x;

    padding: 10px;

    height: 150px;

    position: relative;

    }



#myLogo {

    position: absolute;

    left: 0;

    height: 150px;

    width: 150px;

    background: url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat;

}

                           



#myConame {

    height:90px;

    width: 230px;

    background:url(/photos/i-T3ZjJ8R/2/X3/i-T3ZjJ8R-O.png) no-repeat;

    margin: 25px auto 0 auto;

}                

                

#myBanner {

    position: absolute;

    right: 0;

    top: 0;

    height:90px;

    width: 300px;

    margin: 30px 5px 0 0;

    background:url(/photos/i-6tx4SXp/0/X3/i-6tx4SXp-X3.png) no-repeat;

}



                

/* CSS Dropdown Nav Bar */

/* Original code by Stu Nicholls of */

/* http://www.cssplay.co.uk/ */

/* Edited for content, formatting and some elements */

/* Please help support CSSPlay at: */

/* http://www.cssplay.co.uk/support.html */



/* CSS Section */



      /* style the outer div to give it width */

.menu {

   float:right;

   z-index:99;

   /*margin: 0 auto;*/

   width: 500px;

}



      /* remove all the bullets, borders and padding from the default list styling */

.menu ul {

   padding:0;

   margin:0;

   list-style-type:none;

}



      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */

.menu li {

   float:left;          /* float right will reverse the main buttons */

   text-align:center;

   width:auto; 

   position:relative;

   padding: 0;

}



      /* style the links for the top level */

.menu a, .menu a:visited {

   display:block;

   text-decoration:none;  /* none, overline, underline */

   color:white;

   background:none;

   border:1px solid rgb(15,86,196);         /* optional */        

   border-width:1px 1px 1px 1px;   /* optional */

   font-size:12pt;

   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;

   width:auto;         /* Defines the main box dimensions. */

   height:20px;        /* How tall your cells are */

   line-height:20px;   /* vertical text alignment in cell */ 

   padding: 0 10px;    /* top/bottom R/L */

   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */

}



      /* main hover */

.menu a:hover, .menu :hover > a {

   color:red;

   background:white;

}



      /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}



      /* style the table so that it takes no part in the layout */

.menu table {position:absolute; top:0; left:0;}







      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */



      /* another hack for IE5.5 */

* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */





      /* hide the sub levels and give them a position absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

   top:20px;       /* move drop vertically */

   left:0;         /* move drop horizontally   */

   width:150px;    /* Size of the daughter cells */

}



      /* style the second level background non-hover */

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:yellow;}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:red;}

.menu ul ul :hover > a.drop {background:red;}



      /* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

   color:red;

   background:rgb(139,179,241);

   height:20px; 

   line-height:20px; 

   width:150px;

}



.menu ul ul :hover > a.drop  {background:purple;}   /* 2nd if 3rd level exists */



      /* yet another hack for IE5.5 */

* html .menu ul ul a {width:120px; w\idth:120px;}



      /* 2nd level hover */

.menu ul ul a:hover, .menu ul ul :hover > a {

   color:purple;

   background:rgb(246,232,137);

}







      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */



      /* position the third level flyout menu */

.menu ul ul ul {

   left:150px; 

   top:0;

   width:150px;

   height:auto;

}



.menu ul ul ul li a {color:purple;}

.menu ul ul ul li a:hover {color:green;}



      /* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {background:purple;}  /* not FF */



      /* style the third level hover */

.menu ul ul ul a:hover {background:yellow;}

.menu ul ul ul :hover > a {background:yellow;}     /* 3rd (w/o 4th) 4th hover */



      /* style the third level links */

.menu ul ul ul a, .menu ul ul ul a:visited {

   color:pink;              /* hover 2nd > 3rd & 4th */

   background:orange;       /* hover 3rd > 4th */

   height:20px; 

   line-height:20px; 

   width:150px;

}





      /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */



      /* position the fourth level flyout menu */

.menu ul ul ul ul {

   left:150px; 

   top:0;

   width:150px;

   height: auto !important;

}



     /* 4th level non-hover */

.menu ul ul ul ul li a {

   color:blue;

   width:150px;

}



      /* style the fourth level hover */

.menu ul ul ul ul a:hover {background:white;}

.menu ul ul ul ul :hover > a {background:white;}





      /* make the 2nd level visible when hover on 1st level */

.menu ul :hover ul {visibility:visible;}

      /* make the 3rd level visible when you hover over 2nd level */

.menu ul :hover ul :hover ul {visibility:visible;}

      /* make the 4th level visible when you hover over 3rd level */

.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

      /* keep the 3rd level hidden when you hover on 1st level */

.menu ul :hover ul ul {visibility:hidden;}

      /* keep the 4th level hidden when you hover on 2nd level */

.menu ul :hover ul :hover ul ul {visibility:hidden;}



/* End Navbar Code */





/* To make Slideshow button display correctly on all sideshow types.*/



.allthumbs_stretch .albumNav_right, .journalNav_right {width: 400px;}

Thanks...

Quote:

Originally Posted by 56Kruiser (Post 1696446)

No need to post your code, we can see it using WebDev.

This fixes that.

Code:

      /* remove all the bullets, borders and padding from the default list styling */

.menu ul {

   z-index:99;

   padding:0;

   margin:0;

   list-style-type:none;

}

But what do you think about moving it down into the header?

Code:

      /* style the outer div to give it width */

.menu {

   z-index:99;

   position:fixed;

   right: 0;

   top: 5px;

   width: 500px;

}

Quote:

Originally Posted by Allen (Post 1696449)

No need to post your code, we can see it using WebDev.

Sure. I did comment that the reason I posted my code was because I was not leaving it, due to the menu not being displayed. I didn't know how quickly you would respond. :D You are fast!

Quote:

Originally Posted by Allen (Post 1696449)

But what do you think about moving it down into the header?

Code:

      /* style the outer div to give it width */

.menu {

   z-index:99;

   position:fixed;

   right: 0;

   top: 5px;

   width: 500px;

}

I'm game to try that so I do have my code that way now, but it is not moving it down into the header.

I will leave the code like that for now.

Two other issues:

I just discovered. When I click on Galleries/Landscape, it takes me to my Landscape Gallery, but the menu, header and everything disappears. I'm not necessarily needing the header to stay, but thought maybe I want it to, but for sure want the NAV to stay. Any thoughts on that>

This one I likely need to post in the thread by jfriend, but will comment on it here. He has a post about having markers on the top/bottom of which ever link you have selected. I was trying that while you were replying to me here, and it didn't work. Are you aware of any issues that change may cause with your menu structure? That thread is here. Again, I can go post over there, just thought I'd see what you think.

Appreciate your help.

Quote:

Originally Posted by 56Kruiser (Post 1696476)

Sure. I did comment that the reason I posted my code was because I was not leaving it, due to the menu not being displayed. I didn't know how quickly you would respond. :D You are fast!

I'm game to try that so I do have my code that way now, but it is not moving it down into the header.

I will leave the code like that for now.

Two other issues:

I just discovered. When I click on Galleries/Landscape, it takes me to my Landscape Gallery, but the menu, header and everything disappears. I'm not necessarily needing the header to stay, but thought maybe I want it to, but for sure want the NAV to stay. Any thoughts on that>

This one I likely need to post in the thread by jfriend, but will comment on it here. He has a post about having markers on the top/bottom of which ever link you have selected. I was trying that while you were replying to me here, and it didn't work. Are you aware of any issues that change may cause with your menu structure? That thread is here. Again, I can go post over there, just thought I'd see what you think.

Appreciate your help.

Looks like the menu is down in the header now.

You have hide owner set for that gallery and that disables customization.

[QUOTE=Allen;1696449]

Quote:

Originally Posted by Allen (Post 1696536)

Looks like the menu is down in the header now.

You have hide owner set for that gallery and that disables customization.

Thanks for your quick reply.

Maybe my definition of 'down in the header' is different from yours. You had provided a fix for me to get it at the very top, and suggested I try in the header, along with the code to do that. Both sets of that code give me the same results:

http://i132.photobucket.com/albums/q...6/InHeader.jpg

The menu is at very top, but the drop downs do come down over the header. As I look at it, this is probably best. Was just curious to try what you suggested.

I changed the hide owner, and sure enough, that worked.

Regards and thanks...

[QUOTE=56Kruiser;1696682]

Quote:

Originally Posted by Allen (Post 1696449)

The header bumps that "This site .... " message in the upper left so stops there. The nav is
fixed at the top. When I looked it did not have that message so the header bumped to the top
which overlapped the nav.

EDIT: Figured it out! This is what I changed to make it work:

width:-20px; /* Size of the daughter cells */

---------------

I'm trying to figure how to align the dropdown cell and its text with the main cell. The text is aligned to the left. Thanks.

http://www.borealphoto.com/photos/i-.../i-ShhnfW3.jpg

Quote:

Originally Posted by Erick L (Post 1696931)

Try the red changes

Code:

      /* style the outer div to give it width */

.menu {

   z-index:99;

   position:relative;    /* Make the container moveable */

   margin: 0 auto 10px;  /* top R/L bottom */

   width:480px;          /* Main bar total width, minimize to not wrap to two lines*/

}



      /* hide the sub levels and give them a position absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

   top:20px;       /* move drop vertically */

   left:0;         /* move drop horizontally   */

   width:100px;    /* Size of the daughter cells */

}





      /* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

   color:#006400;

   background:#cfcfcf;

   height:20px; 

   line-height:20px; 

   width:100px;

   text-align:center;

}

Thanks Allen. I'll go back to my old bar for now. Too many things aren't working for me. Among those, the menu goes under the buttons and main photo:

http://www.borealphoto.com/photos/i-.../i-XTfQTbr.jpg