Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Separation with | in a menu
- Thread starter Hassine
- Start date
- Sort by reaction score
That would be just an inline list, like:
And then just add equal padding/margin to the left and to the right of each li item.
CSS for li element:
Code:
<ul>
<li>Menu 1</li>
<li>|</li>
<li>Menu 2</li>
<li>|</li>
<li>Menu 3</li>
<li>|</li>
<li>Menu 4</li>
</ul>And then just add equal padding/margin to the left and to the right of each li item.
CSS for li element:
Code:
list-style: none;
display: inline;
margin: 0 5px 0 5px;
I was actually looking for a way to do this yesterday.
If you're doing this with something like WordPress, you'd want to use their documentation and not necessarily CSS. They have tags you can add separators to.
In CSS, you can do this with probably some padding:
And it won't put the "|" at the beginning. This doesn't work in IE6 though (if that is an issue for you).
If you're doing this with something like WordPress, you'd want to use their documentation and not necessarily CSS. They have tags you can add separators to.
In CSS, you can do this with probably some padding:
PHP:
li + li:before {
content: " | ";
}And it won't put the "|" at the beginning. This doesn't work in IE6 though (if that is an issue for you).
I'd recommend this method. Generally speaking if it's related to design it's best to do it via CSS rather than markup.
it doesn't work, the | is situated just after the correspondant menu, whatever margin values i put. Here is the result
Attachments
I am not using WordPress, just CSS
Your solution seems to be correct, but once i precise margin-left and margin-right values for li, pipes become just before the li
For example:
Code:
.nav_footer li
{
display: inline;
margin-left: 10px;
margin-right: 10px;
}
li + li:before
{
content: " | ";
}the result is
Attachments
Ah, should have specified to put the margins in the li:before bit:
Code:
li + li:before
{
content: " | ";
margin-left: 10px;
margin-right: 10px;
}It does the margins in the middle this way, vs on each side of the li.
It's a best practice for semantic web design (and accessibility) to do things like menu separators in CSS instead of in the HTML content. I would also recommend using CSS borders to do this instead of pipe characters. CSS borders work in every browser -- even the old ones. So, something like this:
Even better, look into a project like Bootstrap for consistency on all platforms. In 2015 you should be using mobile-first in all projects because the majority of your visitors will likely be from a mobile device.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.horizontal-nav li {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0.5em;
border-right: 1px solid #999;
}
.horizontal-nav li:last {
border-right: none;
}
</style>
</head>
<body>
<ul class='horizontal-nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>Even better, look into a project like Bootstrap for consistency on all platforms. In 2015 you should be using mobile-first in all projects because the majority of your visitors will likely be from a mobile device.
Last edited:
Just a quick example:
http://jsfiddle.net/6yybhu55/4/
HTML:
CSS:
Output:
![a8tkcTHVG5qoqmqV73nlxLhirkCpe2FpfnTjCiWAKwc]()
http://jsfiddle.net/6yybhu55/4/
HTML:
PHP:
<nav class="nav">
<ul class="nav-list">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>CSS:
PHP:
.nav {
background-color: #eee;
text-align: center;
}
.nav-list {
list-style: none;
padding: 10px 0;
}
.nav-list li {
display: inline-block;
}
.nav-list li a {
display: block;
position: relative;
padding: 0 20px;
text-decoration: none;
color: black;
}
.nav-list li a:hover {
color: grey;
}
/* left position is offset by -4px due to inline-blocks
retaining whitespace in HTML, why most use float: left. */
.nav-list li a:after {
content: "|";
position: absolute;
top: 0;
left: -4px;
color: red;
}
.nav-list li:first-child a:after { /* first-child for IE8 support */
display: none;
}Output:
Last edited: