SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 columns inside <li>

    I want to have my <li> elements displaying horizontally. I have read that using display: inline will achieve this but as yet I cannot get it to work. Any suggestions?

    What i want is like this:

    Category 1 | Category 2 | Category 3
    Item 1 Item 2
    Item 3 Item 4

    instead of this:

    Category 1 | Category 2 | Category 3
    Item 1
    Item 2
    Item 3
    Item 4

    Here is the code I'm using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul li {
      display: block;
      position: relative;
      float: left;
    }
    li ul { display: none; }
    ul li a {
      display: block;
      text-decoration: none;
      color: #000;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      background: #b6cfee;
      margin-left: 1px;
      white-space: nowrap;
    }
    ul li a:hover { background: red;}
    li:hover ul {
      display: block;
      position: absolute;
      width: 400px;
    }
    li:hover li {
      float: none;
      font-size: 11px;
    }
    li:hover a { background: #8bb2e2; }
    li:hover li a:hover { background: green; }
    </style>
    </head>
    
    <body>
    <ul id="menu">
      <li><a href="">Category 1</a>
        <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        </ul>
      </li>
      <li><a href="">Category 2</a>
        <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        </ul>
      </li>
      <li><a href="">Category 3</a>
        <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        </ul>
      </li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use float: left for the <li> elements
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers that seems to have done the trick. Simple when you know how.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here another query. If I wanted to have a list of a single column and when there is more than say 5 items in the list another column appears.

    For example:

    Category 1 | Category 2

    Item 1 - Item 1 | Item 2
    Item 2 - Item 3 | Item 4
    Item 3 - Item 5

    This is because one of my lists will be quite long and I need it to display on the page and not have to scroll down. Is this possible. I have tried using a different <li> class and assigning that class to my <li> element but it doesn't work.


    Code:
    ul li.test a:hover{
      float: left;
      font-size: 11px;
    }
    
    li.test: hover a {
      float: left;
      font-size: 11px;
    }
    
    <li><a href="">Category 2</a>
        <ul>
        <li class="test"><a href="">Item 1 </a></li>
        <li class="test"><a href="">Item 2</a></li>
        <li class="test"><a href="">Item 3</a></li>
        <li class="test"><a href="">Item 4</a></li>
        <li class="test"><a href="">Item 5</a></li>
        </ul>
      </li>
    Any suggestions?

    Thanks

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If it's starting to get a bit ridiculous, then you might be interested in using a Mega dropdown menu. That link has screenshots to sites who are using them.

    Usually if you have soooo many links in a category, possibly they can be further grouped. Making the main li's contain a div with many separate lists inside is a popular solution:
    Code:
    <ul id="nav">
      <li>
        <a href="f00dz">Category: f00dz</a>
        <div>
          <h2>Sweets</h2>
          <ul>
            <li><a href="#">Tom poes</a></li>
            <li><a href="#">Mergpijp</a></li>
            <li><a href="#">Boterkoek</a></li>
          </ul>
          <h2>Sours</h2>
          <ul>
            <li><a href="#">Appel</a></li>
            <li><a href="#">Citroen</a></li>
            <li><a href="#">Grapefruit</a></li>
          </ul>
          <h3>Food Co.'s specialty sour:</h3>
          <p><a href="#">Super-Sour-Soup</a></p>
        </div>
      </li>
      ...
    </ul>
    The anchor sitting there between blocks may trigger a bug in IE. If it does, wrap a p or something around it.

    You can add in header elements, borders, and other things if that makes searching clearer for the user.

    It also makes it working with keyboard+css-only more difficult, so while many of these sites nothing works without Javascript (which is totally unnecessary, you can keep your same rules you have now where #menu li:hover div {} brings a div or whatever onscreen), you may consider having a sitemap-style menu somewhere else on the page too... or a link to one.

    One thing you have to be very careful with is, because these things get so big, they might be larger than the user's screen. Keep them as small as you can get away with: unless the user has a scroll-wheel, they won't be able to scroll the page if the page-height grows only when they hover.

    You may also want a Javascript on-hover delay so the mouse zooming around the page doesn't immediately fill the page with huge boxes.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This looks an exciting solution to my problem. Does this solution work well with Google and SEO in general?

  7. #7
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There doesn't appear to be a link or way to see an example of the code used so I can adapt it to fit what I need.

    Does this solution use jquery or is it just html.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    This looks an exciting solution to my problem. Does this solution work well with Google and SEO in general?
    It's just HTML. It's as obvious as any other HTML to search engines.

    There doesn't appear to be a link or way to see an example of the code used so I can adapt it to fit what I need.
    I assumed you would go to the sites listed and look at them, but then I don't see their code as being all that great either : ) Mostly, you'd keep the code you have but with CSS style the sub ul larger... if you want to add non-link text too like headers, then wrap a div around that sub-ul and change your CSS from showing the ul on hover to showing the div.

    Does this solution use jquery or is it just html.
    Some use Javascript of some sort but you don't *have* to use Javascript to turn a regular drop-down to a mega dropdown. The recommended Javascript is a slight on-hover delay, which is an extra.

  9. #9
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks for all your help


Tags for this Thread

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
  •