SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Struggling to set up a menu style

    I am using one of the dropline menus that are available at Stu Nicholls CSSplay site. I have been quite successful in tailoring it for my needs, but I lack the sophisticated CSS skills to completely understand it.

    What I am trying to do is to use a different style for one dropline than I do for all of the others. I had thought that it would just require me to set up the style and use an ID specification, but that doesn't work as I have coded it.

    There is a lot of stuff in this, so for simplicity I'll start by extracting the key lines. Later I'll append the entire module and style.

    First the 2 styles:

    Code CSS:
    /* defines the drop line hover bar for all normal links */
    #droplineMenu ul ul :hover div {left:0; top:30px; width:998px; text-align:center; height:30px;}
    #droplineMenu ul ul li div b {display:block; width:998px; height:30px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;} 
     
    /* defines the drop line hover bar for Members Only link, once it is visible */
    #droplineMenu ul ul#MOlinks :hover div {left:0; top:30px; width:998px; text-align:center; height:60px;}
    #droplineMenu ul ul#MOlinks li div b {display:block; width:998px; height:60px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;}

    (Note that the only difference is the #MOlinks)

    Now the HTML fragment ... I will include one normal and the one I have tried to change ...

    HTML Code:
    <li><a><b>About Us</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Directions</a></li>
                        <li><a href="#url">Contacts</a></li>
                        <li><a href="#url">Audubon</a></li>
                        <li><a href="#url">Careers</a></li>
                        <li><a href="#url">Website Credits</a></li>
                        <li><a href="#url">Legal</a></li>
                        <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                    </ul>
                </div>
                </li>
                <cfif NOT IsDefined("Session.IsLoggedIn")>
                    <li><a href="javascript:ColdFusion.Window.show('Login');ColdFusion.navigate('../MemberLogin.cfm','Login');">
                        <b>Members Only</b></a></li>
                <cfelse>
                    <li><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                <div><b></b>
                    <ul id="MOlinks">
                        <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                        <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                        <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                        <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                        <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                        <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                        <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                        </ul>
                    </div>
                    </li>
                    </cfif>
            </ul>
    (Note that the only difference is in the ID="MOlinks" specification)

    And finally, the full style sheet, then the full nav bar code for those who want to see it all ...

    Code CSS:
    #droplineMenu {height:30px; position:relative; text-align:center; width:998px; margin:0 auto; z-index:100;}
    #droplineMenu ul {padding:0; margin:0; list-style:none;}
    #droplineMenu ul ul li {float:left;}
    #droplineMenu ul ul li a {display:block; float:left;}
    #droplineMenu ul ul div {position:absolute; left:-9999px; overflow:hidden;}
     
    #droplineMenu ul#menuOuter {display:inline-block; padding-left:124px;} 
    #droplineMenu ul#menuOuter li.lv1-li {display:inline-block; height:30px;}
     
    #droplineMenu ul ul li a {height:30px; line-height:30px; padding:0 15px 0 0; font-size:13px; font-weight: bold; font-family: arial; color:#fff; text-decoration:none; }
    #droplineMenu ul ul li a b {display:block; height:30px; float:left; padding:0 0 0 20px; font-weight:bold; cursor:pointer;}
    #droplineMenu ul ul li a:hover {background:url(tabg.gif) right top; line-height:30px;}
    #droplineMenu ul ul li a:hover b {color:#fc0; background:url(tabg.gif) left top; line-height:30px;}
     
    #droplineMenu ul ul li:hover > a {background-color:#649546; line-height:30px; }
    #droplineMenu ul ul li:hover > a b {color:#fc0; background-color:#649546; line-height:30px;}
     
    /* defines the drop line hover bar for all normal links */
    #droplineMenu ul ul :hover div {left:0; top:30px; width:998px; text-align:center; height:30px;}
    #droplineMenu ul ul li div b {display:block; width:998px; height:30px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;} 
     
    /* defines the drop line hover bar for Members Only link, once it is visible */
    #droplineMenu ul ul#MOlinks :hover div {left:0; top:30px; width:998px; text-align:center; height:60px;}
    #droplineMenu ul ul#MOlinks li div b {display:block; width:998px; height:60px; position:absolute; left:0; top:0; background:url(DroplineBG.gif); z-index:-1; padding:0; line-height:30px;}
     
    #droplineMenu ul ul li div ul {display:inline-block;}
    #droplineMenu ul ul li div ul li {display:inline-block; display:inline;}
     
    #droplineMenu ul ul div a {background:url(DroplineBG.gif); height:30px; line-height:30px; font-size:13px; padding:0 20px;}
    #droplineMenu ul ul div a:hover {background:url(DroplineBG.gif); color:#fc0; line-height:30px;}


    HTML Code:
    <div id="droplineMenu">
    <ul id="menuOuter">
        <li class="lv1-li">
            <ul>
                <li><a><b>Plan Your Day</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="../Plan/Directions.cfm">Directions</a></li>
                        <li><a href="../Plan/Contacts.cfm">Contacts</a></li>
                        <li><a href="../Plan/DressCode.cfm">Dress Code</a></li>
                        <li><a href="../Plan/GuestFees.cfm">Guest Fees</a></li>
                        <li><a href="../Plan/GuestFac.cfm">Guest Facilities</a></li>
                        <li><a href="../Plan/Weather.cfm" class="last">Weather</a></li>
                    </ul>
                </div>
                </li>
                <li><a><b>Golf Course</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Hole-by-Hole</a></li>
                        <li><a href="#url">Scorecard</a></li>
                        <li><a href="/GolfCourse/PhotoGallery.cfm">Photo Gallery</a></li>
                        <li><a href="#url">Practice Facilities</a></li>
                        <li><a href="#url">Pro Shop</a></li>
                        <li><a class="last" href="#url">McBroom Design</a></li>
                    </ul>
                </div>
                </li>
                <li><a><b>Events</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Dining Facilities</a></li>
                        <li><a href="#url">Invitationals</a></li>
                        <li><a href="#url">Weddings &amp; Banquets</a></li>
                        <li><a class="last" href="#url">Tournaments</a></li>
                    </ul>
                </div>
                </li>
                <li><a><b>Membership</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Why Join</a></li>
                        <li><a href="#url">Reciprocals</a></li>
                        <li><a href="#url">Community</a></li>
                        <li><a href="#url">The Costs</a></li>
                        <li><a href="#url">How to Join</a></li>
                        <li><a href="#url">Improve Your Game</a></li>
                        <li><a class="last" href="#url">Junior Golf</a></li>
                    </ul>
                </div>
                </li>
                <li><a><b>Tradition</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Our History</a></li>
                        <li><a href="#url">50th Anniversary</a></li>
                        <li><a href="#url">Achievements</a></li>
                        <li><a href="#url">Wall of Fame</a></li>
                        <li><a class="last" href="#url">Strategic Plan</a></li>
                    </ul>
                </div>
                </li>
                <li><a><b>About Us</b></a>
                <div><b></b>
                    <ul>
                        <li><a href="#url">Directions</a></li>
                        <li><a href="#url">Contacts</a></li>
                        <li><a href="#url">Audubon</a></li>
                        <li><a href="#url">Careers</a></li>
                        <li><a href="#url">Website Credits</a></li>
                        <li><a href="#url">Legal</a></li>
                        <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                    </ul>
                </div>
                </li>
                <cfif NOT IsDefined("Session.IsLoggedIn")>
                    <li><a href="javascript:ColdFusion.Window.show('Login');ColdFusion.navigate('../MemberLogin.cfm','Login');">
                        <b>Members Only</b></a></li>
                <cfelse>
                    <li><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                <div><b></b>
                    <ul id="MOlinks">
                        <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                        <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                        <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                        <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                        <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                        <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                        <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                        </ul>
                    </div>
                    </li>
                    </cfif>
            </ul>
        </li>
    </ul>
    </div>
    Last edited by SpacePhoenix; Sep 21, 2010 at 10:59. Reason: enclosed code fragments in relevant code tags and syntax highlighting for improved readability

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

    You have the id in the wrong place as it should be on the parent list that holds that nested ul.

    e.g. here:

    Code:
    <li id="MOlinks"><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                                <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                                <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                                <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                                <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                                <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                                <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                            </ul>
                        </div>
                    </li>
    Then re-align the code to point to that element. You only need to supply the differences as the memu is already positioned with the existing code.

    Code:
    #droplineMenu ul ul li#MOlinks :hover div {
        height:60px;
    }
    #droplineMenu ul ul li#MOlinks div b {
        background:red;
        height:60px;
    }

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As it happens, I'm getting conflicting advise from the original menu list. One person is telling me to move everything down to the li in the second list. (It didn't work.)

    I will do some experimenting with this, but what I observe before starting is that you are suggesting that I put the style on the li for the outer list, but in the CSS, the order of specifications is ul ul li (i.e., the inner list) ... wouldn't that conflict?

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, didn't work (and I tried several variations on that). I think we're getting warmer ... this business of embedding ul's makes it very confusing.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes it does work exactly as I said. My code always works

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        background:#999
    }
    #droplineMenu {
        height:30px;
        position:relative;
        text-align:center;
        width:998px;
        margin:0 auto;
        z-index:100;
    }
    #droplineMenu ul {
        padding:0;
        margin:0;
        list-style:none;
    }
    #droplineMenu ul ul li {
        float:left;
    }
    #droplineMenu ul ul li a {
        display:block;
        float:left;
    }
    #droplineMenu ul ul div {
        position:absolute;
        left:-9999px;
        overflow:hidden;
    }
    #droplineMenu ul#menuOuter {
        display:inline-block;
        padding-left:124px;
    }
    #droplineMenu ul#menuOuter li.lv1-li {
        display:inline-block;
        height:30px;
    }
    #droplineMenu ul ul li a {
        height:30px;
        line-height:30px;
        padding:0 15px 0 0;
        font-size:13px;
        font-weight: bold;
        font-family: arial;
        color:#fff;
        text-decoration:none;
    }
    #droplineMenu ul ul li a b {
        display:block;
        height:30px;
        float:left;
        padding:0 0 0 20px;
        font-weight:bold;
        cursor:pointer;
    }
    #droplineMenu ul ul li a:hover {
        background:url(tabg.gif) right top;
        line-height:30px;
    }
    #droplineMenu ul ul li a:hover b {
        color:#fc0;
        background:url(tabg.gif) left top;
        line-height:30px;
    }
    #droplineMenu ul ul li:hover > a {
        background-color:#649546;
        line-height:30px;
    }
    #droplineMenu ul ul li:hover > a b {
        color:#fc0;
        background-color:#649546;
        line-height:30px;
    }
    /* defines the drop line hover bar for all normal links */
    #droplineMenu ul ul :hover div {
        left:0;
        top:30px;
        width:998px;
        text-align:center;
        height:30px;
    }
    #droplineMenu ul ul li div b {
        display:block;
        width:998px;
        height:30px;
        position:absolute;
        left:0;
        top:0;
        background:url(DroplineBG.gif);
        z-index:-1;
        padding:0;
        line-height:30px;
    }
    /* defines the drop line hover bar for Members Only link, once it is visible */
    #droplineMenu ul ul li#MOlinks :hover div {
        height:60px;
    }
    #droplineMenu ul ul li#MOlinks div b {
        background:red;
        height:60px;
    }
    #droplineMenu ul ul li div ul {
        display:inline-block;
    }
    #droplineMenu ul ul li div ul li {
        display:inline-block;
        display:inline;
    }
    #droplineMenu ul ul div a {
        background:url(DroplineBG.gif);
        height:30px;
        line-height:30px;
        font-size:13px;
        padding:0 20px;
    }
    #droplineMenu ul ul div a:hover {
        background:url(DroplineBG.gif);
        color:#fc0;
        line-height:30px;
    }
    </style>
    </head>
    <body>
    <div id="droplineMenu">
        <ul id="menuOuter">
            <li class="lv1-li">
                <ul>
                    <li><a><b>Plan Your Day</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="../Plan/Directions.cfm">Directions</a></li>
                                <li><a href="../Plan/Contacts.cfm">Contacts</a></li>
                                <li><a href="../Plan/DressCode.cfm">Dress Code</a></li>
                                <li><a href="../Plan/GuestFees.cfm">Guest Fees</a></li>
                                <li><a href="../Plan/GuestFac.cfm">Guest Facilities</a></li>
                                <li><a href="../Plan/Weather.cfm" class="last">Weather</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a><b>Golf Course</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="#url">Hole-by-Hole</a></li>
                                <li><a href="#url">Scorecard</a></li>
                                <li><a href="/GolfCourse/PhotoGallery.cfm">Photo Gallery</a></li>
                                <li><a href="#url">Practice Facilities</a></li>
                                <li><a href="#url">Pro Shop</a></li>
                                <li><a class="last" href="#url">McBroom Design</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a><b>Events</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="#url">Dining Facilities</a></li>
                                <li><a href="#url">Invitationals</a></li>
                                <li><a href="#url">Weddings &amp; Banquets</a></li>
                                <li><a class="last" href="#url">Tournaments</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a><b>Membership</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="#url">Why Join</a></li>
                                <li><a href="#url">Reciprocals</a></li>
                                <li><a href="#url">Community</a></li>
                                <li><a href="#url">The Costs</a></li>
                                <li><a href="#url">How to Join</a></li>
                                <li><a href="#url">Improve Your Game</a></li>
                                <li><a class="last" href="#url">Junior Golf</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a><b>Tradition</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="#url">Our History</a></li>
                                <li><a href="#url">50th Anniversary</a></li>
                                <li><a href="#url">Achievements</a></li>
                                <li><a href="#url">Wall of Fame</a></li>
                                <li><a class="last" href="#url">Strategic Plan</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a><b>About Us</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="#url">Directions</a></li>
                                <li><a href="#url">Contacts</a></li>
                                <li><a href="#url">Audubon</a></li>
                                <li><a href="#url">Careers</a></li>
                                <li><a href="#url">Website Credits</a></li>
                                <li><a href="#url">Legal</a></li>
                                <li><a href="http://whitevalegc.blogspot.com/" >Whitevale Blog</a></li>
                            </ul>
                        </div>
                    </li>
                    <li id="MOlinks"><a href="../Members/MemberHome.cfm"><b>Members Only</b></a>
                        <div><b></b>
                            <ul>
                                <li><a href="../Members/TeeTimes.cfm">Tee Times</a></li>
                                <li><a href="../Members/Handicap.cfm">Scores & Handicaps</a></li>
                                <li><a href="../Members/MemberLookup.cfm">Member Lookup</a></li>
                                <li><a href="../Members/TeeTimes.cfm">Event Calendar</a></li>
                                <li><a href="../Members/Sideline.cfm">Sideline 30</a></li>
                                <li><a href="../Members/ListBoard.cfm">Bulletin Board</a></li>
                                <li><a href="../Members/TeeTimes.cfm">Statements</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>

    Your code was miles out as you had this:

    Code:
    #droplineMenu ul ul#MOlinks :hover div {left:0; top:30px; width:998px; text-align:center; height:60px;}
    That would assume that the #MOlinks id was placed on this ul here:

    Code:
    <div id="droplineMenu">
        <ul id="menuOuter">
            <li class="lv1-li">
                <ul id="MOlinks">
                    <li><a><b>Plan Your Day</b></a>
                        <div><b></b>
                            <ul>

    You can't put the id on a ul anyway as it has to be on the "li" so that the nested elements are targeted. Exactly as shown in my working code above

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx. I should be able to figure it out from that. I grabbed your code and put it in a separate page which came out red so I know that much works.

    One thing though ... the height:60px; didn't work. Is there something else needed to get it to apply the height?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,726
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The height:60px shouldn't have needed anything else to work
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have loaded this page up so it can be readily seen ...

    http://www2.whitevalegolfclub.com/Public/NavTest2.cfm

    It contains the stuff from Paul O'B imbedded into some of my page standard coding. What you can see is all the CSS and nav links plus the result ... the red shows through but the height isn't happening. As a minimum, I'd expect the background image to be duplicated (as it did before when I only had height 60).

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's the overflow:hidden on the div that is hiding the extra height. You can remove it for the members link like so:
    Code:
    #droplineMenu ul ul li#MOlinks div {overflow:visible}
    I'm not sure why you need it in the first place on looking quickly,

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if you'll find it useful, but here it goes: your two levels menu has a far too aggressive appearance and disappearance act will not be thought off well. and the second level keep flickering will make for an annoying little thing that will get in the mind of your users.

    that's it. hope you don't mind

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    not sure if you'll find it useful, but here it goes: your two levels menu has a far too aggressive appearance and disappearance act will not be thought off well. and the second level keep flickering will make for an annoying little thing that will get in the mind of your users.

    that's it. hope you don't mind
    Yes that's a good point and something like the superfish add on is a useful accessibility enhancement as it allows for a delay on the menu so that users with some motor disability can still get their mouse to the target.

    I often find dropdowns hard to navigate because you just have to slip of the menu for a fraction and then it's gone. The superfish allows a delay so that you can still move off the target and back again without it flicking off in the meantime.

    Using javascript to enhance something and make it better is a good use of javascript.

  12. #12
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We have a relatively closed community of users for this application and they are already accustomed to using a drop down menu scheme that is built in JavaScript. It gives me pleasure to get away from the JavaScript because of some of the differences in different browsers. This version will be strictly CSS based and is less intrusive visually because it stays at the top of the window.

    For the interest of anyone reading this thread, the final CSS I am using is as follows:

    /* defines the drop line hover bar for Members Only link, once it is visible */
    #droplineMenu ul ul li#MOLinks div {height: 60px; text-align:center;}
    #droplineMenu ul ul :hover li#MOLinks div {height: 60px; }
    #droplineMenu ul ul li#MOLinks div a {background: url(DroplineBG.gif); height: 30px; line-height: 30px; font-size: 13px; padding: 0 20px;}
    #droplineMenu ul ul li#MOLinks div b {height:60px;}

    While I can't explain it all, this gives me the double line I wanted. Thanx for the help in getting the job done.


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
  •