Menu
I've been experimenting with making a HTML/CSS navigation bar with chevron-shaped list items. I've made my code available here: https://github.com/twslankard/css-chevron-bar/blob/master/index.html
Since my question is fairly specific, I'm offering up the code as public domain in the off chance that one of you CSS wizards will help me. :)
Now for my question. I've been trying to design the bar so that it scales properly, e.g. when someone modifies the font-size property of ul.chevronbar li or when the user hits Control+ or Control- in the browser.
I tried using two different CSS resets, both Eric Meyers Reset CSS 2.0 and YUI 3. However, in Firefox the scaling/zooming "mostly" works, and in Chrome it does not work (especially when zooming in). If possible, I'd like some advice on how to get this to work better in Chrome.
Here's an image illustrating the issue. Your help is greatly appreciated.
EDIT: this is what I ended up with eventually. Pardon the messy CSS. I'll get around to cleaning it up later.
https://github.com/twslankard/css-chevron-bar-2
EDIT 2: Another person generously provided their solution to this problem here: http://jsfiddle.net/pXBTK/3/
824
A navigation bar (also called a Navbar) is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, of the pages within the website.
A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website. A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links.
Effectively, the trick is how to make the height of the pointy parts match the height of the menu item it follows, thus avoiding the jagged look.
I am guessing that something like this causes the problem:
It seems clear then that the fix is to simply hide the overflow as stated. The only change really necessary to the original is:
ul.chevronbar {
...
overflow: hidden; /* Add this line */
}
It would also need resizing to get closer to the original look, but works without that. Fixed height is not actually necessary.
This simplified example illustrates the arrow concept with highlighting for parts of the arrow:
<head><style type="text/css">
ul {
background-color: lightgray;
font-size: xx-large;
overflow: hidden;
position: relative;
}
li {
display: inline-block;
background-color: gray;
margin-right: 1.5em;
}
li:after {
content: '';
border: 0.85em solid blue;
border-left-color: red;
border-right-color: red;
height: 0;
position: absolute;
top: -0.2em;
}
</style></head>
<body><ul>
<li>Lorem Ipsum</li> <li>Foobar</li>
</ul></body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
