SitePoint Sponsor

User Tag List

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

    drop down menu help

    I have a basic website in the works. My navigation bar looks a bit primitive, I'd like to add a drop down menu effect. I found a few pages online that show the html and styles to create such a menu, BUT...the problem I'm having is I already have a CSS file full of current styles for everything. I'm getting very confused trying to incorporate the new stuff for the new menu. Could anyone out there take a look and help me out with this??
    Josh

  2. #2
    SitePoint Enthusiast alexson's Avatar
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're going to need to provide more information than that!

    However you should be able to copy the CSS for the menu to your existing file without any problems so long as you aren't using any classes/ids that have identical names in both your CSS and the menu CSS, all you need to do is rename any identical classes/ids for one if them in both the CSS and HTML if there is a conflict.

  3. #3
    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)
    Do you have a link to the site?

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, a bit more info
    Here is my current html navigation:

    <div id="navigation">
    <ul>
    <li><a href="homepage.html">home</a></li>
    <li><a href="painting.html">painting</a></li>
    <li><a href="drawing.html">drawing</a></li>
    <li><a href="bio.html">bio</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    </div> <!--end of navigation div-->

    Here it is with the sub-menus I would like to add:

    <div id="navigation">
    <ul>
    <li><a href="homepage.html">home</a></li>
    <li><a href="painting.html">painting</a>
    <ul>
    <li><a href="landscapes.html">landscapes</a></li>
    <li><a href="still lifes.html">still lifes</a></li>
    </ul>
    <li><a href="drawing.html">drawing</a></li>
    <ul>
    <li><a href="figures.html">figures</a></li>
    <li><a href="others.html">others..</a></li>
    </ul>
    <li><a href="bio.html">bio</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    </div> <!--end of navigation div-->


    What's confusing me is the new CSS that comes with the submenus conflicts with what I've created so far. How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work, ex:
    <ul>
    <li><a href="landscapes.html">landscapes class="sub" </a></li>

    but i know the class is in the wrong spot, how do i do that?

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Son of Suckerfish Dropdowns | HTML Dog


    ^^this is what i was trying to follow

    I don't have it online, I'd have to email you files in a zip for you to take a closer look

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jbish74 View Post
    How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work, ex:
    <ul>


    but i know the class is in the wrong spot, how do i do that?
    To use a class like that, it would go here:

    Code:
    <li><a class="sub" href="landscapes.html">landscapes </a></li>
    or perhaps better here:

    Code:
    <li class="sub"><a href="landscapes.html">landscapes</a></li>
    BUT, you don't need extra classes at all. Instead, you can target those sub items in various ways, as shown below:

    Code:
    ul li li {}
    li li {}
    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. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work
    Hi,
    Your dealing with inheritance here and you will need to override any <li> or <a> styles in the sub-UL if you want them to be different.
    Regardless of whether you set a class on them or not they are still inheriting their styles.

    Ralph has shown you how to target them using descendant selectors rather than classes.

    To hide the sub-UL you will want to set it to position:absolute; to remove it from the normal flow (so it doesn't push other elements around when it drops). That sub-UL is normally hidden off-screen with a large negative margin, then that margin is set to zero on li:hover ul to reveal the dropdown.

    I put together some very simple examples a while back that show the basic concept.

    Simple Dropdown #1
    Simple Dropdown #2

    If you view the page source you will find the complete code.

    EDIT:
    I will also point out that you have some errors in your nesting. You did not close the first parent LI and the second sub-UL was not nested at all, only a LI can be the direct descendant of an UL. You can also hook that "navigation" ID directly to the UL and loose the div.

    Code:
    <ul id="navigation">
        <li><a href="homepage.html">home</a></li>
        <li><a href="painting.html">painting</a>
            <ul>
                <li><a href="landscapes.html">landscapes</a></li>
                <li><a href="still lifes.html">still lifes</a></li>
            </ul>
        </li>
        <li><a href="drawing.html">drawing</a>
            <ul>
                <li><a href="figures.html">figures</a></li>
                <li><a href="others.html">others..</a></li>
            </ul>
        </li>
        <li><a href="bio.html">bio</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why but I'm not getting a dropdown effect. I copied the CSS from the first ex, word for word, into a brand new separate CSS file for a 'Test' site. Everything else is identical, the nav bar and everything. Just no drop down.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I copied the CSS from the first ex, word for word, into a brand new separate CSS file for a 'Test' site
    The CSS would have to match up with the html, you can't expect CSS to work on html if the element names are not the same.

    Please post your revised css/html so we can see what's going on.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK for starters, it's most likely you don't need the extra div.

    your HTML is not structured properly , it shoudl be as follows:
    Code:
    <ul id="navigation">
    	<li><a href="homepage.html">home</a></li>
    	<li><a href="painting.html">painting</a>
    		<ul>
    			<li><a href="landscapes.html">landscapes</a></li>
    			<li><a href="still lifes.html">still lifes</a></li>
    		</ul>
    	</li>
    	<li><a href="drawing.html">drawing</a>
    		<ul>
    			<li><a href="figures.html">figures</a></li>
    			<li><a href="others.html">others..</a></li>
    		</ul>
    	</li>
    	<li><a href="bio.html">bio</a></li>
    	<li><a href="contact.html">contact</a></li>
    </ul>
    Basically, ,a sub menu is a UL within an LI.. so you have to make sure it's coded that way.
    <UL><LI>menu<UL><LI>sub</LI><LI>sub</LI></UL></LI></UL>. Which I believe was what Razur was trying to point out in his Edit


    once you fix it either CSS method should work.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Which I believe was what Rayzur was trying to point out in his Edit
    That's right, I took the OP's html from post#4 and made the corrections in blue.

    I copied the CSS from the first ex, word for word..
    The point I was trying to make in my last post is that you would have needed to rework your html also if you copied the styles from my 1st example exactly as they were.

    In that example I do not have my UL nested in a div, my ID is hooked to the UL itself. Furthermore my ID is named #nav rather than #navigation. That's why I said you couldn't expect it to work without making adjustments to the html also.

    If you still need help you will need to post your complete nav code (css & html) as there is nothing more we can do without seeing it.

  12. #12
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, little late in responding, but here is my HTML:

    <body>
    <ul id="nav">
    <li><a href="homepage.html">home</a></li>
    <li><a href="painting.html">painting</a>
    <ul>
    <li><a href="landscapes.html">landscapes</a></li>
    </ul>
    </li>
    <li><a href="drawing.html">drawing</a>
    <ul>
    <li><a href="figures.html">figures</a></li>
    </ul>
    </li>
    <li><a href="bio.html">bio</a></li>
    </ul>
    </body>
    </html>

    And as I said, the CSS is identical to the example(except a change in color but that's it)

  13. #13
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need CSS nearly as complicated as that! Look at http://nekkidblogger.com/2011/ultra-...dblogger-menu/

    That's a four level menu with five short structural rules!!

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jf_ishere View Post
    That's a four level menu with five short structural rules!!
    It's not a very accessible menu, though.
    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."

  15. #15
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's not a very accessible menu, though.
    I'm not sure I understand what you mean by that?

  16. #16
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jf_ishere View Post
    I'm not sure I understand what you mean by that?
    In that case, you really shouldn't making any suggestions for CSS drop-down menus.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jf_ishere View Post
    I'm not sure I understand what you mean by that?
    A well-designed drop menu will not depend on the user having a mouse and/or eyes. So it should ideally work with keyboard navigation, and also be accessible to someone using an assistive device such as a screen reader.
    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."


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
  •