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)

Quote:

Originally Posted by Allen (Post 1665992)

Change all these like this. You missed a bunch of them.

background-color: rgba(22, 22, 22, 0.001);

0.001 seems to make the background invisible better then 0.1 did.
Looks like it works in IE9 using the developer tools.

btw, the mouse would lose it when hitting the text "share". Now I can get to "Recent".

Good catch, updated the rest of the backgrounds and that seems to have done the trick. Many thanks for the assistance!

Hello Allen,

I have tried applying the codes but I can't get it right :scratch, I have left the CSS code for now and removed the custom header codes as the homepage looks totally messed up when I leave it. I hope you can help me again, below is how I want the dropdown to look :

http://i87.photobucket.com/albums/k1...WNLAYOUT-1.jpg

Thanks a lot in Advance!:bow

Quote:

Originally Posted by jpl_1020 (Post 1666985)

What are the main buttons? Your image confuses me.

Then what is under each main button?

Ooops, my apologies for the confusion. Main buttons would be:

1) Home

2)Portraits
- Family
- Children
- Maternity
- Bridal
- Glamour•Fashion

3) Events
- Wedding
- Christening

4) Travel
- Places
- Macro
- Safari ***I forgot to add this one on the illustration

5) Proofing

I have not set up the galleries yet for these dropdowns because it might just cause more confusion. I plan to set them up after the dropdowns has been created. Just point me where I could paste the links.

Thanks a lot Allen!

Quote:

Originally Posted by jpl_1020 (Post 1667001)

How's this?

Code:

<div id="my_banner"></div>

<div class="menu">

<ul>

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

<li><a class="drop" href="#link">Portraits

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

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

    <ul>

        <li><a href="#link">Family</a></li>

        <li><a href="#link">Children</a></li>

        <li><a href="#link">Maternity</a></li>

        <li><a href="#link">Bridal</a></li>

        <li><a href="#link">Glamout • Fashion</a></li>

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

</li>

<li><a class="drop" href="#link">Events

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

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

    <ul>

        <li><a href="#link">Wedding</a></li>

        <li><a href="#link">Christening</a></li>

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

</li>

<li><a class="drop" href="#link">Travel

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

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

    <ul>

        <li><a href="#link">Places</a></li>

        <li><a href="#link">Macro</a></li>

        <li><a href="#link">Safari</a></li>

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

</li>

<li><a href="#link">Proofing</a></li>

<li><a href="/gallerys/18822222_7MBVs8">About Me</a></li>

</ul>

</div>

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

Thanks Allen, that will work. I will just have to fix the colors, fonts and spacing. But the website looks skewed, how do I fix that?

This is how the website should look with the added dropdown feature:

http://i87.photobucket.com/albums/k1...5/Website2.jpg

Quote:

Originally Posted by jpl_1020 (Post 1667019)

Replace your header, you missed a couple div's.

Code:

<div id="myHeaderContainer">

<div id="myHeader">



<div class="menu">

<ul>

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

<li><a class="drop" href="#link">Portraits

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

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

    <ul>

        <li><a href="#link">Family</a></li>

        <li><a href="#link">Children</a></li>

        <li><a href="#link">Maternity</a></li>

        <li><a href="#link">Bridal</a></li>

        <li><a href="#link">Glamout • Fashion</a></li>

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

</li>

<li><a class="drop" href="#link">Events

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

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

    <ul>

        <li><a href="#link">Wedding</a></li>

        <li><a href="#link">Christening</a></li>

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

</li>

<li><a class="drop" href="#link">Travel

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

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

    <ul>

        <li><a href="#link">Places</a></li>

        <li><a href="#link">Macro</a></li>

        <li><a href="#link">Safari</a></li>

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

</li>

<li><a href="#link">Proofing</a></li>

</ul>

</div>



<div id="my_banner"></div>



</div>  <!-- closes myHeader -->

</div>  <!-- closes myHeaderContainer -->



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

Start with CSS. All your colors should be in it.

Code:

/* 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: 60px auto 20px;  /* top R/L bottom */

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

}



      /* 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: #808080;

   background:none

   font-9pt

   font-family: Verdana, Copperplate Gothic Light, Copperplate-Gothic-Light, Verdana, Trebuchet MS;

   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:#C8C8C8;

   background:rgba(22, 22, 22, .0001);

}



      /* 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 positon absolute so that they take up no room */

.menu ul ul {

   visibility:hidden;

   position:absolute;

   height:0;

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

   left:-30px;         /* move drop horizontally   */

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

}



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

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:rgba(22, 22, 22, .0001);}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:rgba(22, 22, 22, .0001);}

.menu ul ul :hover > a.drop {background:rgba(22, 22, 22, .0001);}



      /* style the second level links */

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

   color:#808080;

   background:rgba(22, 22, 22, .0001);

   height:auto; 

   line-height:20px; 

   width:120px;

}



.menu ul ul :hover > a.drop  {background:rgba(22, 22, 22, .0001);}   /* 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:#C8C8C8;

   background:rgba(22, 22, 22, .0001);

}



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

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



/* End Navbar Code */

Thanks Allen, looks better but the dropdowns are out of alignment. Do I need to remove the old navcontainer codes?

Quote:

Originally Posted by jpl_1020 (Post 1667019)

...

btw, I'm staring to use this for transparent backgrounds. IE browsers choke moving down the drop when
background is set to none. Any text the mouse hits between drop text the drop will disappear. It's like
the mouse senses nothing underneath. .0001 makes the background very transparent with it still there.

background:rgba(22, 22, 22, .0001);

Seems to work so far.

Quote:

Originally Posted by Allen (Post 1667040)

Sorry Allen, I am lost in the translation.....:scratch

Also, how do I fix the alignment of the dropdown?:dunno

Thanks!

Quote:

Originally Posted by jpl_1020 (Post 1667061)

Sorry Allen, I am lost in the translation.....:scratch

Also, how do I fix the alignment of the dropdown?:dunno

Thanks!

I posted new CSS in post #1347, try that, it has the alignment fixed and your colors in it.

Also a CSS version sorted by level to make it easier to read and work with.

Oops, I might of edited it to add the alignment, recopy and paste in.

Awesome Allen! :barbThanks a bunch! I honestly won't be able to do it without your help! :clap

Again, thank you very much!:bow

Hi Allen, it's me again... for final touches:

1) How can I increase the space between the main menu and the drop down? To be more specific, I want the dropdown to appear below the header line.
2) How can I increase the space in between sub menus?
3) How can I narrow the box for of the submenus?
4) How can I make the banner clickable again and function the same as "Home"?

Thanks.

Quote:

Originally Posted by jpl_1020 (Post 1667116)

See if this works for you.
Add the red lines in the header menu html.

Code:

...

    <ul>

        <li class="drop1">&nbsp;</li>

        <li><a href="http://www.jplimages.com/Family/Family/18832729_Z4HdjV#1207246267_dkcsz">Family</a></li>

...

    <ul>

        <li class="drop1">&nbsp;</li>

        <li><a href="#link">Weddings</a></li>

...

    <ul>

        <li class="drop1">&nbsp;</li>

        <li><a href="http://www.jplimages.com/Other/Places/18833395_R4z5MD#1449909588_6hpxMjs">Places</a></li>

...

...

<div id="my_banner"></div>

<div id="my_banner">

<a href="/">

<img src="/img/spacer.gif" width="320" height="85" border="0" alt="">

</a>

</div>

Change/add red in this section of CSS. The one long text Glamour•Fashion limits the width narrowing.

Code:

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

.menu ul ul {  background:#990000;

   visibility:hidden;

   position:absolute;

   height:0;

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

   left:-20px;         /* move drop horizontally   */

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

}



.menu ul ul li.drop1 {

   background:rgba(22, 22, 22, .0001);

   width:115px;

   height:24px

}



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

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:rgba(22, 22, 22, .0001);}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:rgba(22, 22, 22, .0001);}

.menu ul ul :hover > a.drop {background:rgba(22, 22, 22, .0001);}



      /* style the second level links */

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

   color:#808080;

   background:#990000;

   height:auto; 

   line-height:35px; 

   width:115px;

   padding:1px;

}

Allen, thanks a lot!!!:clap The only problem now is the huge space between the footer and the slideshow. I noticed the big gap on pictures that are in landscape position only. :scratch

Also, as part of the last request :D, If possible I would like to put borders on submenu boxes:help

Quote:

Originally Posted by jpl_1020 (Post 1667256)

Perhaps that big bottom gap is reserved for portraits?

Not really Allen, the gap was not there before the dropdown feature...

Quote:

Originally Posted by jpl_1020 (Post 1667256)

...
Also, as part of the last request :D, If possible I would like to put borders on submenu boxes:help

How's this?

Code:

      /* style the second level links */

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

   color:#808080;

   background:#990000;

   height:auto; 

   line-height:20px; 

   width:120px;

   border: 1px solid #ccc;

}

:clapAwesome Allen! I can't thank you enough! :thumb

I guess I'll just address the space issue on the slideshow @ John's thread.:wink

I was updating my navbar with this...

HTML Code:

<ul>



<li><a              href="http://timfullerphotography.smugmug.com/">HOME</a></li>



<li><a class="drop" href="#">INFO

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

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

     <ul class="moveLeft">

       <li><a href="http://timfullerphotography.smugmug.com/Website/About/18827630_NfTJ5J">About</a></li>

          <li><a href="http://timfullerphotography.smugmug.com/Website/Contact/16379223_QYxh5">Contact</a></li>

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





<li><a              href="http://timfullerphotography.smugmug.com/Portfolio">PORTFOLIOS</a></li>

<li><a              href="http://timfullerphotography.smugmug.com/galleries">GALLERIES</a></li>

<li><a              href="http://timfullerphotography.smugmug.com/find/">SEARCH</a></li>

<li><a              href="http://www.timfullerphotography.com/blog/">BLOG</a></li>

</ul>

When I did that BLOG moved below HOME, how can I move it back up to the right of SEARCH?