Using Same Menu In Various Places

Discussion in 'CSS' started by gobbly2100, Aug 30, 2007.

0
  1. #1
    I have a menu but if I want to use the ID in multiplay places on the page then I have to make it a CLASS instead right?

    Basicaly I want to make a menu going down the left but as I want to seperate it so I can put in titles for each section of links I need to stop the list, insert the section title and then start another list right? Or am I doing it wrong?
     
    gobbly2100, Aug 30, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The id attribute can be used multiple times, but the value must be unique.

    For example, you can have id="one" and id="two" but not id="one" and id="one".

    And based on what you've said, you may want to use a list of lists. Have each primary list item be the "section title" with the lists nested inside them being the menu items for that section.

    The HTML for this is deceptively simple.

    
<ul id="menu">
    <li>
        Section Title
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </li>
    <li>
        Section Title
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </li>
    <li>
        Section Title
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </li>
    <li>
        Section Title
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </li>
    <li>
        Section Title
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </li>
</ul>
    Code (markup):
    There's also no need to add classes to this if you know how to use CSS descendent selectors properly (the exception being for "current page/section" techniques of course).
     
    Dan Schulz, Aug 31, 2007 IP