All geek questions in one place

Constant positioning relative to objects located

I have a line of uniform distance navigation items that looks like this:

enter image description here

The selected menu item is shown in bold italics. The designer wants the rest to become italics on hover. When this happens, it expands the text of this element, which pushes all the other elements, because they are displayed in a line with a fixed margin. I have to get rid of the boost.

What is the correct way to fix this behavior? I have a couple of ideas using javascript:

  • Load the text into a div and set the width of each div to the width of the text.
  • Download, take the positions of each of the menu items relative to the div, then set their positions to absolute with the resulting coordinates (this would be good, because they are always in the same absolute position within the navigation div).

Both of them seem a bit hacky, and this is a pretty simple problem, so I thought there should be an easier way.

I use jQuery if that matters.

Below is a pretty minimal HTML page that will reproduce the problem:

<head> <style type="text/css"> body { background: black; font-family: sans-serif; } a { margin: 0px 20px; font-size: 16px; color: white; text-decoration: none; } a:hover { font-weight: bold; font-style: italic; } </style> </head> <body> <a id="projectslink" href="#projects">Projects</a> <a id="innovationslink" href="#innovations">Innovations</a> <a id="newslink" href="#news">News</a> <a id="aboutlink" href="#about">About</a> <a id="contactlink" href="#contact">Contact</a> <a id="breathlink" href="#">Breath*</a> </body>
+4
source share
4 answers

Here is my solution:

http://jsfiddle.net/pRhKF/10/

Obviously, you will have to adapt this to fit your own code. This makes all a widths that they will have when the text is in bold for a long time putting them in bold and then not shifting them. Unfortunately, I also had to use the hover binder event to achieve the mouse effect, but maybe you can find a way to do this ...

+2
source

I don’t think there is an elegant solution to this old CSS problem ... I can think of two “hacker” CSS solutions to choose from:

  • Give display: block-inline elements and a fixed width (in em , of course, to prevent font scaling / scaling issues). The width will differ from element to element if the indentation should look consistent.
  • Hide the text and replace it with a replacement.

In my opinion, your first solution (setting a fixed width onload ) is not so bad. He "feels good" so as not to bother with position and at least much less hacker than alternatives.

To clarify this, I would execute your first solution:

HTML : no change

CSS : no change

Javascript

 $(function() { $('a').each(function() { var menuItem = $(this); menuItem.css({ 'display': 'inline-block', 'width': menuItem.outerWidth(true), 'margin': 0, 'text-align': 'center' }); }); });

As you can see:

  • No need to wrap menu items in a div (just set display: block-inline from JS);
  • Each individual element can be centered by setting the width to the calculated outerWidth() (which includes margin, filling, and border width), clearing the margin and setting text-align to center .

Real-time example in JSFiddle .

+3
source

Personally, I like to point my navigation to the layout of the list, and then display a block of anchor elements with a width:

http://jsfiddle.net/9AEnv/

I swim, but you can also give them a display: an inline block if you want to avoid floats.

+1
source

For posterity, this is the solution I came across: http://jsfiddle.net/jmcdon10/UdJZ5/

Mostly based on @Max's answer (which was itself a rework of my first proposed solution), but using css hover instead of jQuery hover event binder.

0
source

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

More articles:


All Articles