SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 49 of 49
  1. #26
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, can this drop down (guest/guest) be done in CSS or easier to use Superfish or something like that?

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's just a standard drop down but you'd need to align the transparent images carefully. Of course IE6 will need either solid images or the alpha image loader filter but that is really clunky on drop downs.

    J(ust out for the day now back this evening)

  3. #28
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool....is there a page online or on SP for reference? Or, would love to hire you to do it (woops....did I say that?).

  4. #29
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The Suckerfish method is a popular one (the original, non-JavaScript version of Superfish).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #30
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. Isn't that a page about sitemaps?

  6. #31
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Oops, sorry (fixed now). Must not have hit "copy" hard enough.

    Suckerfish method
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #32
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I was wondering if there was somewhere that explained standard drop downs so I could give it a try.

    Also, do you know why the text on the top of the contact form here won't turn white? Argh, I've tried #left p, .top, and other things but the parent property keeps taking over the size and color only.

  8. #33
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    Thanks Ralph. I was wondering if there was somewhere that explained standard drop downs so I could give it a try.
    O, I hoped that's what the link above would do. Well, basically you have an unordered list as your top level links. Within those link items, you can nest another unordered list that has your drop down links.

    Then you set up some CSS rules. Basically, you set the nested lists not to display (display:none) or move them way off screen with a negative left setting, for example.

    Then you set a rule that when you hover over the top level list items, that nested list jumps into viewóby changing the CSS positioning. You tell the nested list to position itself onscreen just below the top level menu item.

    Also, do you know why the text on the top of the contact form here won't turn white?
    Do you mean yellow? (There's no rule there to make it white.)

    The rule that is applying is

    Code:
    .twoColFixRtHdr #mainContent p, .twoColFixRtHdr #mainContent p.mission {
      color: #330000;
      font-size: 0.8em;
      line-height: 1.7em;
      padding: 0 40px 0 30px;
    }
    That is a more specific rule than

    Code:
    #left p {
      color: #FFFFCC;
    }
    So change your rule to something like

    Code:
    #mainContent #left p {
      color: #FFFFCC;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is an old example of mine but it works well and should be easy to understand. The ony difficult part is that it is a multiple flyout which means that we have to add extra rules because when you set a nested ul to visible all other nested uls will show so you have to turn the others off.

    The same thing applies to styles set on one hovered lists so you have to counteract on others. In a multiple flyout you just have to keep track of what's being done on the current menu and then cancel it necessary of the nested one.

    It's just basic css that would apply to nested elements but you can get into a mess quite easily.

    If you can't make progress I'll knock up a demo that fits your site but I'd like you to try first

  10. #35
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.

    Ralph, thought it was the lowest one down on the list got priority. Forgot it was the more specific one. Thank you.

    Paul....absolutely....I'll give the drop downs a try.

  11. #36
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you can't make progress I'll knock up a demo that fits your site but I'd like you to try first
    I made some progress but styling is terrible. Here it is. (guest/guest). Should look similar to this!

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sculley View Post
    I made some progress but styling is terrible. Here it is. (guest/guest). Should look similar to this!
    Well you've got the bare bones working. The rest is just decoration

    You want background images on the nested ul and not the individual list items. Use an oversized transparent png for the gradient effect transparency (and just a solid colour for ie6).

    The top level will need to have a fixed pixel height as you need to match the gradient exactly for when the rollover shows.

    It would be easier to give the dropdowns all the same width rather than fluid width as it is easier to code that way although it is possible to make them adjust to content length but just a bit more fiddly.

    I'll have a look at the code later on and see if I can get it closer to what you want.

  13. #38
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, cool. Got some of them.....it's better:

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That looks better

    To finish it off you'll probably have to float the anchors and give them a height so that the background image meets the sub list. Remember to cancel out anything that you apply on the top level from cascading into the sublist such as the height and the background image on the top level.

    To keep the top level highlighted while traversing the sublist you would turn the anchor on via the li:hover and not the a:hover.

    li:hover a{background:url( etc....}

    Then turn it off for sublists with:
    li:hover li a{background:none}

    etc.

  15. #40
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot....I'm afraid I'm not following you on that one.

    Probably need to change the color when hovering over each subnav item too.

  16. #41
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sculley View Post
    Shoot....I'm afraid I'm not following you on that one.
    I was just saying that you need to create a graphic for the top level menu anchor and show it on rollover but you must make sure that you remove it from the nested list anchors at the same time.

    Probably need to change the color when hovering over each subnav item too.
    I would go with a text color change as you can't change the background colour as that would mess the effect up.

  17. #42
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tested the drop downs in IE and they're not even working in IE 9 or 10. I think I'm missing something.

    For the top level menu anchor ("About" and "Programs"), can I just use a color?

  18. #43
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'll have a look at the code later on and see if I can get it closer to what you want.
    Still open to this :-)? Not getting this for IE or other things at all. Should I just try Suckerfish?

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The menu is working in IE8. IE7 had z-index issues but is working. I haven't checked IE9 but I'll have a look in a minute.

    For the top level menu anchor ("About" and "Programs"), can I just use a color?
    It would be easier to use a solid background colour for the top menu but of course you will lose the transparent gradient effect.

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here are the revised nav rules (note that some of these rules are for further levels and could be removed but will do no harm).

    Code:
    /*==== Begin Main Nav -- header bottom nav ====*/
    #header {
        z-index:99
    }
    ul#nav, ul#nav ul {
        margin:0;
        padding:0;
        list-style-type:none;
    }
    ul#nav {
        top:127px;
        right:30px;
        list-style-type:none;
        font-family:Arial, Helvetica, sans-serif;
        font-size:1.2em;
        letter-spacing:1px;
        position:absolute;
    }
    ul#nav li {
        display:inline;
        position: relative;
        float:left;
    }
    ul#nav a {
        display:inline;
        float:left;
        padding:0 20px;
        height:38px;
        line-height:38px;
        text-decoration:none;
    }
    ul#nav a, ul#nav a:link, ul#nav a:visited {
        color: #650000;
    }
    ul#nav .current a {
        color: #FFCB65!important;
        background:transparent!important
    }
    ul#nav a:focus {
        outline:0;
        color: #650000;
    }
    /* ----- Drop Downs ----- */
    #nav li ul {
        position: absolute;
        width:200px;
        left: -5px;
        top: 38px;
        margin-left:-999em;
        z-index:100;
        background: url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/background-bg-lg.png) no-repeat 0 -25px;
    }
    #nav li li {
        width:200px;
    }
    /* Styles for Menu Items */
    ul#nav li li a {
        display: block;
        text-decoration: none;
        color:#ffffcc;
        padding:5px 10px;
        height:auto;
        line-height:normal;
        background:transparent!important;
    }
    ul#nav li li a:link, ul#nav li li a:visited {
        color:#ffc
    }
    /* commented backslash mac hiding hack \*/ 
    * html ul#nav li a {
        height:1%
    }
    /* end hack */
    /* this sets all hovered lists to red */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
        color: ffffcc;
        background:#f5c417;
    }
    /* set dropdown to default */
    #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
        color: #ffffcc;
        font-size:.55em;
    }
    ul#nav li li a:hover {
        color:#000
    }
    /* Sub Menu Styles */
    ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
        margin-left:-999em;
    }
    ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
        margin-left:0;
    }
    /* ----- Columns ----- */
    You also need this for IE6.
    Code:
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    I think that's what you were aiming for.

  21. #46
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow....this is very advanced. Are you or would you consider teaching a Sitepoint class on advanced navigation (there's another one you did for me). Or, mixed with other advanced elements? I've been hoping for a class like that.

    How do get the vertical red lines between nav to come down? I tried a margin-top on the "red" class.

    I know this may be way too complicated so if so, that's okay. The yellow block when nav is hovered over was only going to be for the drop downs. No hover for the others just font turns to yellow when page is active. That too complicated.

    I see what you mean by using a graphic for the yellow when hovered. Needs to blend more.

    I adjusted the drop down margins a bit and increased the size of the drop down bg. Now the top nav yellow isn't matching the margins of the drop downs - left nav margin sticks out and you can see the yellow "box". Change the nav outline margin?

    This doesn't work in IE 5 and 6. Guess that's okay.

  22. #47
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed the drop down margin. Looks good.

  23. #48
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sculley View Post
    Wow....this is very advanced. Are you or would you consider teaching a Sitepoint class on advanced navigation (there's another one you did for me). Or, mixed with other advanced elements? I've been hoping for a class like that.
    Some of the existing css courses covered navigation if I remember correctly.

    How do get the vertical red lines between nav to come down? I tried a margin-top on the "red" class.
    Just set the height and line-height of the list element to the same as the anchor and then cancel it out on the submenu.

    e.g. Extra code in bold
    Code:
    ul#nav li {
        display:inline;
        position: relative;
        float:left;
        height:38px;
        line-height:38px;
    }
    ul#nav li li{
        height:auto;
        line-height:normal;
    }
    I know this may be way too complicated so if so, that's okay. The yellow block when nav is hovered over was only going to be for the drop downs. No hover for the others just font turns to yellow when page is active. That too complicated.
    The easiest solution is to add a class to the anchors that you don't want to change colour.

    e.g.
    Code:
    <li><a class="nodrop" href="../registration/index.html">register</a><span class="red">|</span></li>
    Add that class to all the top level menu anchors that have no submenus.

    Then add this code at the end of the navigation styles.
    Code:
    #nav li:hover a.nodrop, 
    #nav li.over a.nodrop{background:transparent}
    Just set the text colour to what is needed using the class as above when hovered etc.

    I see what you mean by using a graphic for the yellow when hovered. Needs to blend more.

    I adjusted the drop down margins a bit and increased the size of the drop down bg. Now the top nav yellow isn't matching the margins of the drop downs - left nav margin sticks out and you can see the yellow "box". Change the nav outline margin?
    You seem to have moved it all out of position a bit.

    Change the nav to left:-7px and change the background colour to match the top of the image.

    Code:
    #nav li ul {
        background: url("../images2/background-bg-lg.png") no-repeat scroll 0 -25px transparent;
      left: -7px;
    
    etc....
    Code:
    /* this sets all hovered lists */
    #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
        color: ffffcc;
        background:#f3be0a;
    }
    This doesn't work in IE 5 and 6. Guess that's okay.
    It works fine in IE6 and even works in ie5.5 providing you have added the js code I gave you to the head of the page (or called the external js file via the conditional comments). There will be a problem with the png image though as IE6 doesn't understand transparent png images as I mentioned ion my earlier post and you should probably swap the png image for a non transparent image for IE6 only (use the * html hack to give ie6 the non transparent image.)

  24. #49
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Some of the existing css courses covered navigation if I remember correctly.
    Just basic nav. Not advanced nav like this.

    Thanks sooo much Paul. I don't think I'd be able to duplicate w/o a class explaining but looks great!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •