0

I'm struggling with the following horizontal menu:

http://jsfiddle.net/UeFeb/

I'd like each <li> item in the menu to be separated by a backslash. I've based my menu on this method: https://stackoverflow.com/a/6880421/556006

How can I get the menu to:

  • Have the slashes sit in the negative space between each <li> element so that they always sit in between each subsequent <li>
  • When the browser width drops below 730px, automatically resize to 2 rows of 3 <li> items (at the moment it drops one <li> down at a time as the browser width is reduced)

Thoughts?

Community
  • 1
  • 1
JVG
  • 20,198
  • 47
  • 132
  • 210
  • 1
    Javascript, or possibly specifying a minimum element size, which may or may not be supported by the user's browser. – user978122 Jan 07 '12 at 03:53

1 Answers1

2

You can add the slashes automatically with CSS like so:

#menu li:after {
    content: "\0020 \002F";
}

And as for the resizing you can sorta fake it using @media queries for that. Take a look at this demo (readjust as necessary):

http://jsfiddle.net/andresilich/UeFeb/1/

Reworked my answer into a more satisfactory one, here is the breakdown for future users:

HTML

<ul id="menu" style="list-style:none">
     <li><a href="#asics">ASICS</a></li>
     <li>/</li>
     <li><a href="#plants">PLANTS PLUS</a></li>
     <li>/</li>
     <li><a href="#tooheys">TOOHEYS</a></li>
     <li>/</li>
     <li><a href="#olympics">OLYMPICS</a></li>
     <li>/</li>
     <li><a href="#panadol">PANADOL</a></li>
     <li>/</li>
     <li><a href="#kia">KIA CADENZA</a></li>
</ul>

CSS

#menu {
    height: 125px;
    margin: 0 auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 90%;
}

#menu li {
    max-width: 150px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

#menu:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

@media screen and (max-width:730px) {
    #menu {
        min-width: 1px;
        width: 35%;
    }
}

http://jsfiddle.net/andresilich/UeFeb/3/

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • Perfect. Thanks mate, appreciate it. EDIT: Hold up, the #menu li:after css isn't working... – JVG Jan 07 '12 at 04:18
  • 1
    @Jascination what is not working? I included a demo in my post. – Andres I Perez Jan 07 '12 at 04:24
  • Apologies for all the comments, but as per the original question still haven't got it working. The li:after gets the slash to sit straight after the
  • elements but not evenly between them. Thoughts?
    • – JVG Jan 07 '12 at 04:32
  • 1
    Its ok :D ...lets see, so you want the backslash to sit evenly between the li elements? mmm, let me tinker, one sec. – Andres I Perez Jan 07 '12 at 04:35
  • @Jascination quick question, what is the point of that misplaced `` tag inside of your `
      ` declaration? that won't validate and will most likely cause problems in older browsers. Also, are you ok with CSS3?
     – Andres I Perez Jan 07 '12 at 04:43
  • The errant `.stretch` `` tag came from the method described [here](http://stackoverflow.com/a/6880421/556006). CSS3 is fine, never used it before but I'm sure I could figure it out. – JVG Jan 07 '12 at 04:55
  • @Jascination that hack might work for a stack of divs but it doesn't bode that well with list items. You can't have none-list elements inside a `ul` tag, otherwise that menu will behave erratically in older browsers and it won't validate. Anyways, here is a CSS3 demo: http://jsfiddle.net/andresilich/UeFeb/2/ ... cleaned up your code a bit too as well. – Andres I Perez Jan 07 '12 at 05:34
  • @Jascination by the way, IE does not support the `box-flex` module just yet but you can make it behave by using a shim, you can find that here: http://flexiejs.com/. – Andres I Perez Jan 07 '12 at 05:35
  • @Jascination Cleaner demo, this one should work just fine across browsers, regardless of the `box-flex` model. http://jsfiddle.net/andresilich/UeFeb/3/ – Andres I Perez Jan 07 '12 at 05:42
  • EDIT: Scratch all that, your lastest update fixed it. AWESOME! Cheers for the help mate, really appreciate it. – JVG Jan 07 '12 at 05:50