Forums

juliepb59

What is the best way to add a drop down menu to a sprite based menu?

existing menu url: http://www.juliepb.com

(want to add 7 menu items to "services")

I used the Simple J-Query drop down list instructions but as I am a complete novice when it comes to scripts, I'm not sure where to adjust the code....

I copied the jquery folders to the directory, then:

HTML (line 30):

<div id="navbar">
<ul id="nav">
<li class="phone"><a href="#">PHONE</a></li>
<li class="home"><a href="index.html">HOME</a></li>
<li class="services"><a href="services.html">SERVICES</a></li>
***I tried adding a sub menu here***
<li class="whyus"><a href="whyus.html">WHY US?</a></li>
<li class="news"><a href="news.html">NEWS</a></li>
<li class="contact"><a href="contact.html">CONTACT</a></li>
<li class="search"><a href="search.html">SEARCH</a></li>
</ul>
</div>

CSS (line 120):

ul#nav li.services a:link,ul#nav li.services a:visited {
width: 110px;
background-image: url(../images/services.png);
background-repeat: no-repeat;
}

Added this CSS (line 164)
ul.submenu {
}
ul.dropdown ul {
width: auto;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}

ul.dropdown ul li {
font-weight: normal;
background: #f6f6f6;
color: #000;
border-bottom: 1px solid #ccc;
float: none;
}
/* IE 6 & 7 Needs Inline Block */

ul.dropdown ul li a {
border-right: none;
width: 100%;
display: inline-block;
}

Help or advice is greatly appreciated! - Julie

TeMc

I'm not sure which "Simple J-Query Drop down list" you are referring to.

But for one I know that a submenu (in other words a sub-list) should be within the list-item ("li") it belongs to

so:


<div id=\"navbar\">
   <ul id=\"nav\">
        <li class=\"phone\"><a href=\"#\">PHONE</a></li>
        <li class=\"home\"><a href=\"index.html\">HOME</a></li>
        <li class=\"services\"><a href=\"services.html\">SERVICES</a> <!-- don't end li -->
            <ul class=\"i-am-the-dropdown\">
                <li><a href=\"#\">Lorem </a></li>
                <li><a href=\"#\">Ipsum </a></li>
                <li><a href=\"#\">Dolor </a></li>
            </ul>
        </li><!-- this is were /li ends -->
        <li class=\"whyus\"><a href=\"whyus.html\">WHY US?</a></li>
        <li class=\"news\"><a href=\"news.html\">NEWS</a></li>
        <li class=\"contact\"><a href=\"contact.html\">CONTACT</a></li>
        <li class=\"search\"><a href=\"search.html\">SEARCH</a></li>
    </ul>
</div>

If this doesn't help you, then we're probebly gonna needs more context (ie. your entire javascript, html and css files). Best way to do that is to link to the online location were they are (since live environment enable us to Firebug/Web Inspect stuff)

--
TeMc

Oh, and PS: Please don't make double topics/threads. If appropiate a Moderator will move if for you. Making a double one cross-forum might raise/cause annoyance and therefor avoidance to your issue :)

juliepb59

Thanks! I'll try this one - and will include more specific info if I have problems.

PS: I thought I deleted one of the posts! Sorry - didn't intend to have both. Now that both have been replied to I can't delete either....

juliepb59

Okay, I am taking a crack at this - again, here's the url for the navigation bar: http://www.juliepb.com

I added the nested list to the source code (line 41), but I am struggling with styling (drop down CSS begins line 169).

As you can see - as I haven't set the display to none anywhere - not sure where to put it .

Also, I noticed that one some dropdown menus, the positioning of the parent is relative, and the child is absolute. Is that what I would do here? My Nav being the parent and the servMenu being the child.

Please forgive my ignorance. Just learning all this.

- Julie

juliepb59

link to menu in question:

http://www.juliepb.com

I've added the nested list to the html (line 40), but I am struggling with positioning in my CSS (line 167) and scripts. I copied and pasted Chris Coyier's simple jquery script, http://css-tricks.com/simple-jquery-dropdowns/ but am not sure how to use it (other than link to it from the html)

Have gone through numerous turotials but am not able to find anything that deals specifically with my situation. As you can see when you visit the link below, my positioning is messed up. Any help would be appreciated.

- Julie Barnes

treehouse : what would you like to learn today?

Forums

adding drop down menu to sprite nav bar