Digital Grin Photography Forum
Page 97  of  125
« First 47 87 93 94 95 96 97 98 99 100 101 107 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)
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/
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)
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).
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)
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
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)
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.
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)
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
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


Times are GMT -8.   It's 11:40 AM.
Page 97  of  125
« First 47 87 93 94 95 96 97 98 99 100 101 107 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.