1

To achieve this layout of a fully justified menu list, I can not use CSS pseudo-classes to display separators between list items; instead, I have to put the separator directly in the HTML. Since according to HTML5 standard in an <ul> only <li> and script-supporting elements are allowed, I made the below code. It is valid HTML5 but it seems quirky to me. Any concerns?

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

li.home {
  padding: 0;
}

li,
script::after {
  vertical-align: middle;
  padding-top: 10px;
}

nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}

script.separator {
  display: block;
}

script.separator::after {
  content: "*";
}
<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <script class="separator"></script>
    <li class="second"><a href="#">Item 1</a></li>
    <script class="separator"></script>
    <li><a href="#">Item 2</a></li>
    <script class="separator"></script>
    <li><a href="#">One more Item</a></li>
    <script class="separator"></script>
    <li><a href="#">Another Item</a></li>
    <script class="separator"></script>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>
Community
  • 1
  • 1
Madamadam
  • 842
  • 2
  • 12
  • 24
  • This question invokes more of a discussion. Do you have a precise question? – Mitya Aug 07 '16 at 11:33
  • I've got to admit, that it's blurry. At the bottom line I would like to know how to put separators between the list items – I've found a solution, but it's ugly. – Madamadam Aug 07 '16 at 11:52
  • This sounds like an XY problem (i.e. you have problem X, and trying to solve it you run into problem Y, and then you come here asking about Y). As far as I can see, the original problem is: you can't use pseudo elements. Why not? That is the question. That's what we should solve! – Mr Lister Aug 07 '16 at 12:15
  • Anyway, to answer the question in the title: no, snippets of JavaScript in between the list items is not semantic, even if they are empty snippets! You might be better off with pieces of plain text (``), but that still would be ugly. Hm. Must think. – Mr Lister Aug 07 '16 at 12:19
  • @Mr Lister: You are so right, it's a classical XY problem … – Madamadam Aug 07 '16 at 12:32
  • 1
    Yea that looks like a real hack. I'd just use a `li`. It's ugly, but not this ugly :P – powerbuoy Aug 07 '16 at 15:34

2 Answers2

0

Replace the <script> with another <li> and simply assign a style to it with 

ul li:nth-of-type(even) {
    display: block;
    content: "*";
    vertical-align: middle;
    padding-top: 10px;
}

This will have the same effect but will look much neater on the code view. 

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li></li>
    <li class="second"><a href="#">Item 1</a></li>
    <li></li>
    <li><a href="#">Item 2</a></li>
    <li></li>
    <li><a href="#">One more Item</a></li>
    <li></li>
    <li><a href="#">Another Item</a></li>
    <li></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

You may have to tweak the actual CSS in the rule above to suit your look and feel but as a concept I think it's neater and cleaner to have all <li> elements and then use CSS to intelligently select all of the correct ones. This also reduces the number of class=" ... " laying around too.

You can also potentially add further rules so that for example you do not do the seperator CSS on the last of type, so the final li would never be the seperator either:

 ul li:nth-of-type(even), ul li :not(:last-of-type) {
    display: block;
    content: "*";
    vertical-align: middle;
    padding-top: 10px;
}
Martin
  • 22,212
  • 11
  • 70
  • 132
0

I'm not sure this is the exact layout you're after, but can you not use display: table and a border?

  ul {
margin: 0;
padding: 0;
list-style: none;

display: table;
width: 100%;
  }

  li {
display: table-cell;
text-align: center;
  }

  li:not(:last-child) {
border-right: 1px solid #333;
  }
<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
</ul>
powerbuoy
  • 12,460
  • 7
  • 48
  • 78
  • Unfortunately the problem is, I exactly need dots as separators … – Madamadam Aug 07 '16 at 16:02
  • You could use a `border-image` to accomplish that. https://developer.mozilla.org/en/docs/Web/CSS/border-image. Edit: Or just a background-image positioned to the right. Or do you mean you need the character "*" as a separator? – powerbuoy Aug 07 '16 at 16:31
  • hmmm. this is not possible with your proposal: i need the first item aligned to the left, the last one aligned to the right as you can see here: http://stackoverflow.com/questions/38805811/fully-justified-horizontal-menu-with-image-and-separators – Madamadam Aug 07 '16 at 17:17
  • Space between separators and items is not equal through all items: between the separator and the last item, space is different. – Madamadam Aug 07 '16 at 19:55
  • Aha I see.. it's a tricky one I guess. I'd just use a `li` instead of `script` though. Imagine another developer looking at the code, I think they'd be much more confused by the `script` elements. – powerbuoy Aug 07 '16 at 20:06