All geek questions in one place

Chevron style navigation bar for CSS and browser scaling tasks

I experimented with creating an HTML / CSS navigation bar with chevron-shaped list items. I made my code here: https://github.com/twslankard/css-chevron-bar/blob/master/index.html

Since my question is quite specific, I suggest the code as a public domain in the random case that one of you CSS masters will help me. :)

Now for my question. I tried to create a bar so that it scales properly, for example. when someone changes the font-size ul.chevronbar li or when the user presses Control+ or Control- in a browser.

I tried to use two different CSS resets, both Eric Meyers Reset CSS 2.0 and YUI 3. However, in Firefox scaling / scaling works “mainly”, and in Chrome it does not work (especially when scaling). If possible, I would like some advice on how to improve Chrome in Chrome.

Here is an image illustrating the problem. Your help is greatly appreciated.

enter image description here

EDIT: this is what I ended up with. Sorry about the dirty CSS. I will take care of cleaning it later.

https://github.com/twslankard/css-chevron-bar-2

EDIT 2: Another person has generously provided his solution to this problem here: http://jsfiddle.net/pXBTK/3/

+6
source share
2 answers

Effectively, the trick is how to make the height of the narrow parts correspond to the height of the menu item that follows, thereby avoiding the jagged look.

I assume something like this is causing the problem:

  • The calculated height of the menu item is 5 physical pixels of the screen.
  • Each upper and lower bounds that create the arrow should be 50% of 5
  • Since you cannot display half a pixel, both round, say, to 3 pixels
  • Add together and the arrow will become 6 pixels, but the menu item will be only 5

It seems clear then that the fix is ​​to simply hide the overflow as indicated. The only change really needed for the original:

 ul.chevronbar { ... overflow: hidden; /* Add this line */ }

You will also need to resize to get closer to the original look, but it works without it. Fixed height is not really needed.

This simplified example illustrates the concept of a backlit arrow for parts of an 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>
+4
source

There are two main questions here.

1) First, do you apply positioning to elements that really don't make sense? Example: when you set the position: absolute; vertical-align: top; will do nothing, since it applies only to inline elements.

Secondly, you didn’t think much about the problem, and it seems like you stick to the code where you can.

So, take a step back and think about what each element does, and lay out the steps to achieve it. We start with a black box and end with a box with chevrons.

1) I create a container with a fixed height, and then set it to overflow: hidden; thus, nothing at a certain height will be shown.

2) I set the position of the elements much differently than you. Elements of my list move to the left.

3) Then place the margins and indents in the list item space.

4) Finally, I put in chevrons and style them.

Here is an example of what I did ...

 ul.chevronbar {list-style-type: none; margin: 0; padding: 0; height:50px; width:auto; overflow:hidden;} ul.chevronbar li {margin: 0; padding: 0; height:50px; width:auto; border:1px solid #000; position:relative; float:left; background:#333; font-size: 1.5em; margin-right: 1em; padding: 0 0.7em; } ul.chevronbar li a {text-decoration: none; color: #fff; line-height:50px; display:block;} ul.chevronbar li:before, ul.chevronbar li:after {content: ' '; height: 0; width: 0; position: absolute; top:-2px; border: 1.2em solid transparent; border-left-width: 0.45em; border-right-width: 0.45em;} ul.chevronbar li:before {border-top-color: #333; border-bottom-color: #333; border-right-color: #333; right: 100%;} ul.chevronbar li:after {border-left-color: #333; left: 100%; margin-left: -0.01em;} li.first {padding-left: 0.5em;} li.first:before {border: none !important ;} li.last:after {border: none !important;}
+2
source

Source: https://habr.com/ru/post/922076/

More articles:


All Articles