Digital Grin Photography Forum - Dropdown Navbar help thread

Page 49 of 63

« First < 39 45 46 47 48 49 50 51 52 53 59 > Last »

Show 40 post(s) from this thread on one page

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)

Allen

Jun-07-2012 05:39 PM

Quote:

Originally Posted by Omaha16 (Post 1785579)

Hi,

I'm a newbie. I'm trying to add a drop down to my portfolio tab. I put the code in and now I have two nav bars. I really like the look of the easy customizer nav bar. Is there a way I can have a drop down with the easy customizer nav bar?

Thanks!

http://jenniferparkesphotography.smugmug.com/

Nope, but I can help with the drop bar and it'll look just like the ECZ one.

Allen

Jun-07-2012 06:01 PM

Quote:

Originally Posted by Omaha16 (Post 1785579)

Through this together so you could see the drop compared to the ECZ bar.

Replace the drop nav header part with this

Code:

<!-- 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 -->

<div class="menu">

<ul>

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

<li>&nbsp;|&nbsp;</li>

<li><a href="/gallery/22566918_Tvb4zS">About me</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="/Portfolio/Portfolio/22566512_rJks6m" title="">Portfolio

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

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

    <ul> 

        <li><a href="#link" title="">Drop 1</a></li>

        <li><a href="#link" title="">Drop 2</a></li>

        <li><a href="#link" title="">Drop 3</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a href="/Photography">Client Galleries</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="http://jparkesphotography.blogspot.com/">Blog</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="/customcontact">Contact me</a></li>

</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->

Replace the drop CSS with this

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 {

   z-index:99;

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

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

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

   color: #2C2C2C;       /* pipes color */

}



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

   background:white;

   font-size:15pt;

   font-family: monospace;

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

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

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

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

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

}



      /* main hover */

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

   color:#AE429C;

   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: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(255, 255, 255, .60);}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:rgba(255, 255, 255, .60);}

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



      /* style the second level links */

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

   color:#2C2C2C;

   background:rgba(255, 255, 255, .60);

   height:20px; 

   line-height:20px; 

   width:120px;

   font-size:14pt;

}



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

   background:rgba(255, 255, 255, .60);

}

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

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



/* End Navbar Code */

Omaha16

Jun-07-2012 06:58 PM

Quote:

Originally Posted by Allen (Post 1785607)

Through this together so you could see the drop compared to the ECZ bar.

Replace the drop nav header part with this

Code:

<!-- 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 -->

<div class="menu">

<ul>

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

<li>&nbsp;|&nbsp;</li>

<li><a href="/gallery/22566918_Tvb4zS">About me</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="/Portfolio/Portfolio/22566512_rJks6m" title="">Portfolio

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

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

    <ul> 

        <li><a href="#link" title="">Drop 1</a></li>

        <li><a href="#link" title="">Drop 2</a></li>

        <li><a href="#link" title="">Drop 3</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a href="/Photography">Client Galleries</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="http://jparkesphotography.blogspot.com/">Blog</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="/customcontact">Contact me</a></li>

</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->

Replace the drop CSS with this

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 {

   z-index:99;

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

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

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

   color: #2C2C2C;       /* pipes color */

}



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

   background:white;

   font-size:15pt;

   font-family: monospace;

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

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

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

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

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

}



      /* main hover */

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

   color:#AE429C;

   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: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(255, 255, 255, .60);}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:rgba(255, 255, 255, .60);}

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



      /* style the second level links */

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

   color:#2C2C2C;

   background:rgba(255, 255, 255, .60);

   height:20px; 

   line-height:20px; 

   width:120px;

   font-size:14pt;

}



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

   background:rgba(255, 255, 255, .60);

}

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

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



/* End Navbar Code */

Got it! THANK YOU! THANK YOU! THANK YOU! You ROCK!

pbclown

Jun-12-2012 09:41 AM

I like a lot of the navbars that are out there, the one thing I would like to change is to be able to click to open, click to close on my drop down menui. Any help would be appreciated

photography-by-jana

Jun-16-2012 06:16 PM

Hi Allen,
Is it possible to change the navbar on a specific gallery?
I looked thorugh a ton of these pages to see if anyone else had asked, but I couldn't find it. I am trying to make a custom page for the bridge and groom for a wedding we have coming up. I wanted to change the links at the top to links for the galleries from engagement photos...

The page is http://www.ericandjanaphotography.co...ndanna/wedding

I got the header changed, but not sure how to go about doing the navbar, or if it's possible.
thanks

photography-by-jana

Jun-16-2012 08:58 PM

ok, so I made some progress and found a way to do it, on another thread, however some of the formatting got changed, any chance you could isolate what I have messed in changing CSS for the second navbar (.menu2).

Allen

Jun-17-2012 05:49 AM

Quote:

Originally Posted by photography-by-jana (Post 1788629)

It looks like your menus will have identical or very similar formatting. Name each with a separate ID and
apply the same class name to both. Then one set of CSS .menu will format both.

<div id="menu1" class="menu">

<div id="menu2" class="menu">

Any minor formatting differences can be handled with a couple of specific CSS rules.

You also have multiple uses of myBanner and myHeader. You can only use an ID once on a page.

photography-by-jana

Jun-17-2012 09:59 AM

Thanks Allen,
I have kept playing with it some, and I think I am getting it. Just have to take care of the repeat, and then I will be good.

Carmen69

Jun-20-2012 01:25 PM

I am looking for some help on adding a nav bar. I have gone through pages and pages and tried/deleted several things and so far this is all I've come up with... www.butterflykissesphotography.me ...I am looking to make it look like this one... http://www.bluedaisyart.com/ ...can anyone help? Many thanks!

Light_prod

Jun-20-2012 06:04 PM

I've just notice that some of the items in my navbar aren't displaying correctly when logged out. Logge in everything looks as it should. Logged out, two of the items are a different font (same font but not bold like the rest).

www.laraluz.com

is anyone able to see what I have that might be causing this?

I have the same header code on my blogger page and its working fine.

antares

Jun-20-2012 07:46 PM

Hello Allen, first of all let me state that you have done an awesome job with this drop down Nav Bar.
This is actually my first post on this board. I've done a lot of reading and just about have my site the way I want it. My question to you is three fold.

1. Is it possible to put a | in between each word on the nav bar.
example: Home | Portfolio | Guestbook | About Me | Contact

2. I've been reading and trying but just can't seem to change the color on the main line with a hover.

3. I've also have been trying to get the nav bar higher up on the page. About level with my banner.

Any help is greatly appreciated!!
Ohhh.. you do need one more thing... http://www.passapera.net
that should help :D

Allen

Jun-21-2012 09:30 AM

Quote:

Originally Posted by antares (Post 1789935)

You are missing the red rule.

Code:

...

      /* style the links for the top level */

.menu a, .menu a:visited {

   display:inline;

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

   color:black;

   background:white;

/* border:1px solid black;         /* 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:25px;        /* How tall your cells are */

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

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

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

}



/* main hover */

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

   color:white;

   background:black;

}



   

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

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



      

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

...

Moved banner to below nav. Added vertical lines and cleaned it up some. You had a mixture of
nickname and domain, changed the links to relative.

Change your whole header to this.

Code:

<div class="menu">

<ul>

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

<li>&nbsp|&nbsp</li>

<li><a class="drop" href="#" title="">Portfolio

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

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

    <ul>

        <li><a href="/gallery/23548787_wRctV8" title="">InfraRed</a></li>

        <li><a href="/Portraits" title="">Portraits</a></li>

        <li><a href="/gallery/23549636_QRSRKG" title="">Nature</a></li>

        <li><a href="/gallery/23421714_k5p5bD" title="">Landscapes</a></li>

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

</li>

<li>&nbsp|&nbsp</li>

<li><a href="/gallery/23668308_MQq2D7" title="">Guestbook</a></li>

<li>&nbsp|&nbsp</li>

<li><a href="/gallery/23549182_hXnggt" title="">About Me</a></li>

<li>&nbsp|&nbsp</li>

<li><a href="mailto:passapera@photographer.net" nicetitle="Send an E-Mail to Victor Passapera">Contact</a></li>

</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->



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



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

CSS chnages

Code:

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

.menu {

   float: right;

   z-index:99;

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

   margin-top: 110px;    /* move nav up & down */

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

   font-size: 12pt;      /* size of vertical lines */

   line-height: 25px;    /* move vertical lines down a little*/

}



/* End Navbar Code */

#my_banner {

width: 570px;

height: 150px;

align: left;

margin: 0;

background: url(http://www.passapera.net/Other/My-SmugMug-Site-Files-Do-Not/i-bfJ4Fhv/0/L/banner-o.jpg) no-repeat;

}

Allen

Jun-21-2012 09:34 AM

Quote:

Originally Posted by Light_prod (Post 1789905)

They all look the same here using Firefox.

antares

Jun-21-2012 09:52 AM

Allen you rock!!!!
Thanks for your fast response and help!!!
Everything is working great!!!

sarahbourne

Jun-26-2012 01:33 PM

Nav bar issues - goes vertical rather than horizontal

1 Attachment(s)

Hi,

Thanks for the css and html code for this nav. bar. I (think) I have added my own links correctly but when I preview on Smugmug all the navigation goes vertically down the left side of the screen. I would like it to go horizontally underneath my logo.

I've attached the html file (I haven't changed the css at all yet as I wanted to get the layout right before changing colours etc).

My site is nendazphotos.com but I still have the simple nav bar there for now.

If you're able to help I'd really appreciate it!

Thanks,

Sarah

Allen

Jun-26-2012 03:06 PM

Quote:

Originally Posted by sarahbourne (Post 1791637)

You will need CSS to support the drop nav.

Replace the header nav html with this. Cleaned it up some and changed it to relative links. Your main
site can be left off as this shows that's lined out.
<li>< a href="~~http://www.nendazphotos.com~~/Architecture">......
So only the part after that is used.
<li>< a href="/Architecture">...... or <li><a href="/SkiSchoolPhotos/January-2011" .....

Code:

<!-- 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 -->



<div class="menu">

<ul>



<li><a href="/" title="Photography by Sarah Bourne">Home</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="/portfolio" title="Portfolios">Portfolios 

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

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

    <ul>

        <li><a href="/Portfolio/Ski-School-Portfolio/23727422" title="Ski School Portfolio">Ski Schools</a></li>

        <li><a href="/Portfolio/Action-Portfolio/23727170" title="Sports Action Portfolio">Action</a></li> 

        <li><a href="/Portfolio/Portrait-Portfolio/23727009" title="Family Portfolio">Families</a></li>

        <li><a href="/Portfolio/Weddings/23723686" title="Wedding Portfolio">Weddings</a></li>

        <li><a href="/Portfolio/Travel-Portfolio/23726838" title="Travel Portfolio">Travel</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="/SkiSchoolPhotos" title="Buy ski school photos here!">Ski School

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

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

    <ul> 

        <li><a href="/SkiSchoolPhotos/January-2011" title="January 2011">Jan 2011</a></li>

        <li><a href="/SkiSchoolPhotos/February-2011" title="February 2011">Feb 2011</a></li>

        <li><a href="/SkiSchoolPhotos/March-2011" title="March 2011">Mar 2011</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#noclick" title="Client Galleries">Client Galleries

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

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

    <ul> 

        <li><a href="/SportsAction" title="Sports Action">Sports</a></li>

        <li><a href="/Weddings" title="Client Weddings">Weddings</a></li>

        <li><a href="/Architecture" title="Commericial & Architecture">Architecture</a></li>

        <li><a href="/Portraits" title="Portraits">Portraits</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a href="/ArtPrints/Scenic/15218482" title="Buy Scenic Prints">Art</a></li>



</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->

CSS to support the drop nav. Edited to look like your current nav.

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 {

   z-index:99;

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

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

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

}



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

   background:#CCFFFF;

   font-size:11pt;

   font-family: arial;

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

   background:#CCFFFF;

}



      /* 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:80px;    /* 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(204, 255, 255, .80);}  /* if 3rd level exists */



      /* style the second level hover */

.menu ul ul a.drop:hover {background:rgba(204, 255, 255, .80);}

.menu ul ul :hover > a.drop {background:rgba(204, 255, 255, .80);}



      /* style the second level links */

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

   color:#513C23;

   background:rgba(204, 255, 255, .80);

   height:20px; 

   line-height:20px; 

   width:80px;

}



.menu ul ul :hover > a.drop  {background:rgba(204, 255, 255, .80);}   /* 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:#C9995A;

   background:rgba(204, 255, 255, .80);

}



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

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



/* End Navbar Code */

sarahbourne

Jun-26-2012 07:07 PM

Left align the 2nd level nav?

Thanks Al! That's awesome. I didn't expect you to do the css too. Just one little thing - how do I align left the second level links?

Thanks again.

Sarah

Allen

Jun-26-2012 07:48 PM

Quote:

Originally Posted by sarahbourne (Post 1791748)

Thanks Al! That's awesome. I didn't expect you to do the css too. Just one little thing - how do I align left the second level links?

Thanks again.

Sarah

I've done this so many times it has become second hand. Much easier to just put the whole thing
together including CSS. Gives a good starting point.

Add red in CSS. Added another rule. IE has a habit of losing the mouse as you slide down the drop and hit the page nav.

Code:

      /* style the second level links */

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

   float:left;

   color:#513C23;

   background:rgba(204, 255, 255, .80);

   height:20px; 

   line-height:20px; 

   width:80px;

   text-align:left;

}



     /* IE page nav showing thru dropdown */

#pageNavigation_top {

    z-index: 50 !important;

}

Light_prod

Jun-28-2012 05:37 PM

thanks for looking at for me. Maybe its a chrome thing....

sarahbourne

Jun-28-2012 08:35 PM

Awesome! Thanks.

Thanks, that worked. Awesome.

:lust

Yobbie

Jul-11-2012 04:09 PM

I am a newbie here so thanks in advance for your help.

Having a problem with my drop down menu not displaying properly using Internet Explorer. Works fine using Mozilla and Safari. When attempting to navigate to the Portfolio pages in Internet Explorer nothing appears.

My website is www.robertsternphotography.com

Again, thanks for your help!

buckethead

Jul-11-2012 05:33 PM

Level 3 Menu ok in Safari, FF; but off in Chrome

Having a little problem with a menu I've had in place for a while. When navigating to the 3 level of my menu (ex: Private Galleries, Students, "student name"), the text and background colors seem to behave as expected in Safari and Firefox, but are mixed up and misbehaving in Chrome.

My apologies if you have already fixed this for others, but I haven't been able to spot the correct thread. Any help you can provide is appreciated!

Bob
www.ardreykellsportsphoto.com

Allen

Jul-12-2012 05:43 AM

Quote:

Originally Posted by Yobbie (Post 1796219)

I'm not familiar with your code and can't offer much help. Perhaps where you got it could help.

Allen

Jul-12-2012 06:17 AM

Quote:

Originally Posted by buckethead (Post 1796235)

See if this works better. I switched to the CSS in the first post of this thread. It's a lot easier to work
with sorted by levels. Also made the drops shorter in height, think it fits the page better.

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 {

   z-index:99;

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

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

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

}



      /* 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:125px; /* changed auto to 125 to make 6 buttons total width of banner */

   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:black;

   background:white;

   border:1px solid black;         /* optional */        

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

   font-size:9pt;

   font-family: verdana;

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

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

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

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

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

}



      /* main hover */

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

   color:white;

   background:#717171;

}



      /* 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:27px;       /* move drop vertically */

   left:0;         /* move drop horizontally   */

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

}



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

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



      /* style the second level hover */

.menu ul ul a.drop:hover {background:#717171;}

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



      /* style the second level links */

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

   color:white;

   background:#370f79;

   height:20px; 

   line-height:20px; 

   width:103px;

}



.menu ul ul :hover > a.drop  {background:#717171;}   /* 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:white;

   background:#717171;

}







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



      /* position the third level flyout menu */

.menu ul ul ul {

   left:124px; 

   top:0;

   width:13px;

   height:auto;

}



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

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



      /* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {background:#370f79;}  /* not FF */



      /* style the third level hover */

.menu ul ul ul a:hover {background:#717171;}

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



      /* style the third level links */

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

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

   background:#370f79;       /* hover 3rd > 4th */

   height:20px; 

   line-height:20px; 

   width:103px;

}



      /* 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;}

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

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



/* End Navbar Code */

buckethead

Jul-12-2012 09:20 AM

Thanks Allen! I'll work on it this even. Really appreciate the quick response.

prairiefox

Jul-12-2012 02:38 PM

Help with nav

1 Attachment(s)

Hi there,

I went through your first post and did as it said. I am not sure of a few things here. First of all I am not 100% on where exactly my HTML goes on the customization page. I tried pasting in the Head Tag, the Body Tag and Custom Header on the Advanced Site-Wide Customization page. I submitted my code and it looked incorrect in the preview, but I figured i would look on the actual page. It was not there. I went back to the Customization page and all the fields were blank.

Where is all the HTML and CSS supposed to go? Why do you have to select a single page to do customization that is supposed to be site wide? I just want a drop down menu with the following menus and sub menus:

HOME
FLOODING > JUNE 24
> JUNE 26
SHUSWAP AERIALS > BLIND BAY SORRENTO
> EAGLE BAY NARROWS
> LITTLE SHUSWAP LEE CREEK
> SCOTCH CREEK ST IVES
> NARROWS SICAMOUS
> SICAMOUS SALMON ARM
PORTFOLIO > LANDSCAPES
> ANIMALS
> CANVAS PRINTS
> OTHER
CONTACT
TESTIMONIALS
PRICING

The website is at www.shuswaponcanvas.com

I am looking for a basic drop down menu with just 4 or 5 colours used throughout, but easy to use.

I can send all the HTML and CSS I have if you want to check it over.

I really appreciate any help you can offer.

Allen

Jul-12-2012 04:59 PM

Quote:

Originally Posted by prairiefox (Post 1796513)

Hi there,

I went through your first post and did as it said. I am not sure of a few things here. First of all I am not 100% on where exactly my HTML goes on the customization page. I tried pasting in the Head Tag, the Body Tag and Custom Header on the Advanced Site-Wide Customization page. I submitted my code and it looked incorrect in the preview, but I figured i would look on the actual page. It was not there. I went back to the Customization page and all the fields were blank.

Where is all the HTML and CSS supposed to go? Why do you have to select a single page to do customization that is supposed to be site wide? I just want a drop down menu with the following menus and sub menus:
...

The website is at www.shuswaponcanvas.com

I am looking for a basic drop down menu with just 4 or 5 colours used throughout, but easy to use.

I can send all the HTML and CSS I have if you want to check it over.

I really appreciate any help you can offer.

The html goes in the header box (not head tag) on the advanced customization page.

The CSS goes in the CSS (optional) box.

I'll be back with the html and CSS in awhile. Hold your breath.:D

Allen

Jul-12-2012 05:58 PM

Quote:

Originally Posted by prairiefox (Post 1796513)

...
The website is at www.shuswaponcanvas.com

This html gets pasted into your header box (not head tag) on the advanced customization page.

Code:

<!-- 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 -->



<div class="menu">

<ul>



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

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Flooding

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

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

    <ul>

        <li><a href="#link" title="">June 24</a></li>

        <li><a href="#link" title="">June 26</a></li> 

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Shuswap Aerials

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

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

    <ul> 

        <li><a href="#link" title="">Blind Bay Sorrento</a></li>

        <li><a href="#link" title="">Eagle Bay Narrows</a></li>

        <li><a href="#link" title="">Little Shuswap Lee Creek</a></li>

        <li><a href="#link" title="">Scotch Creek St Ives</a></li>     

        <li><a href="#link" title="">Narrows Sicamous</a></li>

        <li><a href="#link" title="">Sicamous Salmon Arm</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Portfolio

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

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

    <ul> 

        <li><a href="#link" title="">Landscapes</a></li>

        <li><a href="#link" title="">Animals</a></li>

        <li><a href="#link" title="">Canvas Prints</a></li>

        <li><a href="#link" title="">Other</a></li>     

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Contact</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Testimonials</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Pricing</a></li>



</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->

This gets pasted into your CSS (optional) box.

Code:

.notLoggedIn .menu {display: none;} 



/* 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 {

   z-index:99;

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

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

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

   color: #C96237;       /* vertical line color */

}



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

   background:black;

   font-size:14pt;

   font-family: arial;

   text-align: left;

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

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

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

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

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

}



      /* main hover */

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

   color:#9A9A9A;

   background:black;

}



      /* 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:black;}  /* if 3rd level exists */



      /* style the second level hover */

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

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



      /* style the second level links */

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

   color: #C96237;

   background:black;

   height:20px; 

   line-height:20px; 

   width:190px;

}



.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:#9A9A9A;

   background:black;

}



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

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



/* End Navbar Code */

Rutro

Jul-12-2012 08:42 PM

Need help...

Thank you for all the help so far... I can't get the nav bar to the right hand side of my site.... I'm sure this is easy for those who know what the are doing (not Me)... Suggestions? Please let me know what you need to see to help.

Thanks

Rob

rudrow.smugmug.com

Allen

Jul-13-2012 04:25 AM

Quote:

Originally Posted by Rutro (Post 1796607)

Change the left (no such thing) to relative and the z-index will work.

Code:

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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

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

   color: #FFFCFC;       /* vertical line color */

}

Move to the right

Code:

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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

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

   color: #FFFCFC;       /* vertical line color */

   float: right;

}

Rutro

Jul-13-2012 05:24 AM

Thanks Allen! now how do I get the nav bar on the same line as my logo?

Rob

Quote:

Originally Posted by Allen (Post 1796651)

Change the left (no such thing) to relative and the z-index will work.

Code:

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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

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

   color: #FFFCFC;       /* vertical line color */

}

Move to the right

Code:

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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

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

   color: #FFFCFC;       /* vertical line color */

   float: right;

}

Allen

Jul-13-2012 06:21 AM

Quote:

Originally Posted by Rutro (Post 1796659)

Thanks Allen! now how do I get the nav bar on the same line as my logo?

Rob

Both the logo/banner and nav need to be defined in advanced to get the nav up with the logo. The
code below moves it to advanced.

Change your header to this. Remove the logo from Easy Customizer.

Code:

<!-- 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 -->

<div class="menu">

<ul>

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

   <li><a class="drop" href="#noclick">Categories

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

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

        <ul>

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

            <li><a href="/CentralPA">Central PA</a></li>

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

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

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

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

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

            <li><a href="/BoyScouts">Scouts</a></li>

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

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

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

   </li>

   <li><a href="/gallery/XXXXXXXX_xxxxxxx">About ibr</a></li>

   <li><a href="/gallery/XXXXXXXX_xxxxxxx">Links</a></li>

</ul>

</div>  <!-- closes menu -->

<!-- End Navbar Code -->



<div id="customLogo">

<a href="/">

<img src="/img/spacer.gif" width="406" height="93" border="0" alt="">

</a></div>



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

CSS changes in red.

Code:



#customLogo {

   width: 406px;

   height: 93px;

   margin: 0;

   background: url(/photos/i-w4JLP3h/0/O/i-w4JLP3h.png) no-repeat;

  _background: none;

  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,

   sizingmethod=image, src='/photos/i-w4JLP3h/0/O/i-w4JLP3h.png');

}





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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

   margin-top: 20px;

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

   color: #FFFCFC;       /* vertical line color */

   float: right;

}

Rutro

Jul-13-2012 08:15 AM

Thank you!!! You are awesome!

There is another thing I have been wrestling with aside from the nav bar.... If you look at my site there is a lot of extra space beneath my images that play in the slideshow and my footer and for the life of me I can't figure out how to get rid of it?

Thanks again!

Quote:

Originally Posted by Allen (Post 1796669)

Both the logo/banner and nav need to be defined in advanced to get the nav up with the logo. The
code below moves it to advanced.

Change your header to this. Remove the logo from Easy Customizer.

Code:

<!-- 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 -->

<div class="menu">

<ul>

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

   <li><a class="drop" href="#noclick">Categories

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

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

        <ul>

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

            <li><a href="/CentralPA">Central PA</a></li>

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

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

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

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

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

            <li><a href="/BoyScouts">Scouts</a></li>

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

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

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

   </li>

   <li><a href="/gallery/XXXXXXXX_xxxxxxx">About ibr</a></li>

   <li><a href="/gallery/XXXXXXXX_xxxxxxx">Links</a></li>

</ul>

</div>  <!-- closes menu -->

<!-- End Navbar Code -->



<div id="customLogo">

<a href="/">

<img src="/img/spacer.gif" width="406" height="93" border="0" alt="">

</a></div>



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

CSS changes in red.

Code:



#customLogo {

   width: 406px;

   height: 93px;

   margin: 0;

   background: url(/photos/i-w4JLP3h/0/O/i-w4JLP3h.png) no-repeat;

  _background: none;

  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,

   sizingmethod=image, src='/photos/i-w4JLP3h/0/O/i-w4JLP3h.png');

}





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

.menu {

   z-index:99;

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

   margin: 5 auto 5px;  /* top R/L bottom */

   margin-top: 20px;

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

   color: #FFFCFC;       /* vertical line color */

   float: right;

}

Allen

Jul-13-2012 11:31 AM

Quote:

Originally Posted by Rutro (Post 1796699)

I don't see any extra space here using Firefox.

prairiefox

Jul-13-2012 01:11 PM

THANK YOU...one last thing

1 Attachment(s)

That worked awesome. Thank you so much Allen. The only thing I need to change is the overall width of the menu navigation. Pricing got kicked down below Home.
THANK YOU, THANK YOU!!!

Colin

Quote:

Originally Posted by Allen (Post 1796547)

This html gets pasted into your header box (not head tag) on the advanced customization page.

Code:

<!-- 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 -->



<div class="menu">

<ul>



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

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Flooding

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

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

    <ul>

        <li><a href="#link" title="">June 24</a></li>

        <li><a href="#link" title="">June 26</a></li> 

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Shuswap Aerials

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

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

    <ul> 

        <li><a href="#link" title="">Blind Bay Sorrento</a></li>

        <li><a href="#link" title="">Eagle Bay Narrows</a></li>

        <li><a href="#link" title="">Little Shuswap Lee Creek</a></li>

        <li><a href="#link" title="">Scotch Creek St Ives</a></li>     

        <li><a href="#link" title="">Narrows Sicamous</a></li>

        <li><a href="#link" title="">Sicamous Salmon Arm</a></li>

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a class="drop" href="#link" title="">Portfolio

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

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

    <ul> 

        <li><a href="#link" title="">Landscapes</a></li>

        <li><a href="#link" title="">Animals</a></li>

        <li><a href="#link" title="">Canvas Prints</a></li>

        <li><a href="#link" title="">Other</a></li>     

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

</li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Contact</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Testimonials</a></li>

<li>&nbsp;|&nbsp;</li>

<li><a href="#link" title="">Pricing</a></li>



</ul>

</div>  <!-- closes menu -->



<!-- End Navbar Code -->

This gets pasted into your CSS (optional) box.

Code:

.notLoggedIn .menu {display: none;} 



/* 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 {

   z-index:99;

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

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

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

   color: #C96237;       /* vertical line color */

}



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

   background:black;

   font-size:14pt;

   font-family: arial;

   text-align: left;

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

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

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

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

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

}



      /* main hover */

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

   color:#9A9A9A;

   background:black;

}



      /* 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:black;}  /* if 3rd level exists */



      /* style the second level hover */

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

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



      /* style the second level links */

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

   color: #C96237;

   background:black;

   height:20px; 

   line-height:20px; 

   width:190px;

}



.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:#9A9A9A;

   background:black;

}



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

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



/* End Navbar Code */

Allen

Jul-13-2012 01:15 PM

Quote:

Originally Posted by prairiefox (Post 1796780)

That worked awesome. Thank you so much Allen. The only thing I need to change is the overall width of the menu navigation. Pricing got kicked down below Home.
THANK YOU, THANK YOU!!!

Colin

Increase the width slightly till it does not wrap. 690 > 695 > 700 > etc.

Code:

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

.menu {

   z-index:99;

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

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

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

   color: #C96237;       /* vertical line color */

Rutro

Jul-13-2012 07:11 PM

Thanks for all your help

Quote:

Originally Posted by Allen (Post 1796742)

I don't see any extra space here using Firefox.

Lemur Lover

Jul-15-2012 12:17 AM

Hi Al,

Hope all has been well with you since last we chatted!

We're now in the process of translating as much as we can of the written words on our site into Thai, as we're aiming to attract Thai interest; being that we live here in Thailand. Google Translate may work very well between, say, English and Spanish, but when it comes to Thai, my (Thai) wife says it falls flat on it's face. So she's now translating and I'm setting up duplicate pages in a separate gallery, providing links to those translated pages to click on in our English-speaking galleries and pages.

Thing is, I'm wondering if, or rather hoping that it's possible to create a duplicate custom navigation bar (the same one you helped me with previously) situating it directly beneath the one that's up now but, of course, with the words in each menu in Thai characters.

So I guess that's two questions:

1. Can a second custom navigation bar be created and placed directly below the primary one?

2. Is it possible to use a Thai font (Thai alphabet is constructed of completely different characters to English) for the menu click-ons?

Thanks in advance Al, and hope you're enjoying a wonderful weekend meantime :lust

Allen

Jul-15-2012 05:00 AM

Quote:

Originally Posted by Lemur Lover (Post 1797080)

Add red in your header

Code:

...

...

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

</ul>

</div>  <!-- closes menu -->





<div class="menu Thai">

<ul>

   <li><a href="Link">บ้าน</a></li>

   <li class="navDot">&nbsp;•&nbsp;</li>

   <li><a href="Link">Menu 2</a></li>

   <li class="navDot">&nbsp;•&nbsp;</li>

   <li><a href="Link">Menu 3</a></li>

   <li class="navDot">&nbsp;•&nbsp;</li>

   <li><a class="drop" href="#noclick" title="">เขา

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

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

       <ul> 

           <li><a href="/gallery/21836637_dv9B3s" title="">The Photographer</a></li>

           <li><a href="/gallery/21836651_WSLKFZ" title="">The Photography</a></li>

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

   </li>

   <li class="navDot">&nbsp;•&nbsp;</li>

   <li><a href="Link">การติดต่อ</a></li>

</ul>

</div>



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

<!-- End Navbar Code -->

Add to CSS. Might need a little tweaking. Also where it's displayed needs to be set.

Code:

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

.Thai {

   display: none;

   z-index: 80;

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

}



.category_Thai .Thai {display:block;}

Lemur Lover

Jul-15-2012 06:43 PM

Quote:

Originally Posted by Allen (Post 1797107)

Add to CSS. Might need a little tweaking. Also where it's displayed needs to be set.

Code:

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

.Thai {

   display: none;

   z-index: 80;

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

}



.category_Thai .Thai {display:block;}

Al my friend, you've excelled yourself yet again :clap

The Custom Header code worked a treat, also great to see that Thai characters can be used!

My wife's midway through translating all our pages, so it's probably best to wait until all that is done and we're ready to add the additional nav bar in Thai. Come that point I'll try out the CSS part you provided and may well get back to you again if I need any further assistance with the tweaking.

Although I'm not completely ready to roll with my blog, I have recently set up a Blogger account in preparation. With respect to that, I do have another question for you Al whenever you have the time:

Assuming this is in fact possible to do, do you happen to have a tutorial that gives instruction on how to import custom nav bars from SmugMug websites directly into Blogger accounts?

It's still relatively early days for me trying to figure out how to customise my Blogger account, and although I haven't yet found this myself, I've read things in forums that seem to suggest there are customisation fields for both HTML and CSS. Any help on this would, as always, be greatly appreciated.

Many thanks in advance and wishing you a excellent week ahead :thumb

Times are GMT -8. It's 05:27 AM.

Page 49 of 63

« First < 39 45 46 47 48 49 50 51 52 53 59 > Last »

Show 40 post(s) from this thread on one page