Moving image to button on hover

[motionair]

Hi,

This is my first big issue with css and i cant seem to figure it out. This is my first css project so please be gentle..

Im trying to make a menu that moves a image to the button a user hovers. This is an example of the effect i want, it triggers on click and i want it to go on hover. (https://jsfiddle.net/hzc8gjt7/)

The best would be to do it with CSS only, if that effect is even possible. Here is what i have so far (http://jsfiddle.net/tNLUx/)

to sum up. I want the image on top, moving to the button that the user hovert over.

Thanks!
-Reiel

[Atelierbram]

Forking this Magic Line Navigation pen and changing the background-color of the appended div on hover to an image can get you there. Does require javascript though. With a fixed amount of nav-items, you can also use this one , using a more vanilla-javascript approach.

[motionair]

Thanks, those are great examples. Exactly what ive been looking for.

I have some follow up questions if that is ok. I have been testing for a while now, and there are a few of things i dont understand.
My Magic Line Fork.

The #fancy-nav is float right, with width to 50%, why is it not in the middle?

When i hover interviews and contact the image is not centred over the button, where/what do i edit to change that? This problem also changes when i edit text size..

Also the image doesent stick over a new menu after it is clicked.. this is the java part, which i know nothing about..

Is there a way to add this effect to the built in menu in my wordpress theme.. Im thinking this is a bigger job, but is it enough for me to work with the selectors and classes provided in the link below?
Theme CSS class index.

Thanks again, a lot!
-Reiel

[Atelierbram]

The #fancy-nav is float right, with width to 50%, why is it not in the middle?

That’s what floats supposed to do, if and when the horizontal screen-space allows for it. If you want the nav centered you could possibly center the wrapper div, something like:

.nav-wrap  {
  /* width: 830px; */
  width: 26em;
  margin: 0 auto;
}

the image is not centred over the button,

Missing the background-position property and values:

#fancy-nav #magic-line-two {
  /* stuff */
  background-position: top center;
}

Also the image doesent stick over a new menu after it is clicked

The demo is just that, it is not a working website. On a live website, the webpage would refresh after clicking a menu-link, which would bring it to that different-page with the “current-link” being the one that was clicked (it will have that current_page_item class set on the list-item, and thus will have that image over that current menu-item).

Is there a way to add this effect to the built in menu in my wordpress theme

I think it’s very well possible. Change the javascript target from $mainNav2 = $("#fancy-nav"); to $mainNav2 = $("#site-navigation .nav-menu");

Alternatively one can digg into those theme templates and tweak them, maybe even bypass them and built a custom menu, and disable the “dashboard customizer” menu.

Have to make it responsive too, so maybe you can use some of the styling provided by the chosen theme and/or isolate those styles within media-queries (in the CSS). Anyway, better take your time for this; navigation menus are one of the more intricate, trickier parts of webdesign.

[motionair]

Thank you Atelierbram, much appreciated!

The menu is getting much more like i want it. I now understand more CSS, and all the problems regarding spacing and image placement are resolved.
The last problem however i cant seem to figure out.

The Menu Pen.

JS is a little less visual and i have absolutely no experience with it. The problem is i implemented it into my WP site behind a password and it is still not working.
The Jquery is working, so the mask is visible and moving but the orange Motion Air link stays orange and the mask is always hovering over the same item after i refresh a new page.

Do i need some customizations to fit it to my site?

[Atelierbram]

the orange Motion Air link stays orange and the mask is always hovering over the same item after i refresh a new page

Have you changed the .current_page_item_two a { color: orange ;} into (something like) .current-menu-item a { color: orange; }?

The thing is: now the PHP-templating-engine of WordPress is handling the dynamic class names on elements, depending on the context, so you have to go with that. Do you use in-browser (Chrome-)DevTools (or Firefox devtools/Firebug) to look at the live code to check on this?

Do i need some customizations to fit it to my site?

Probably many more edits needed, but that’s what is making things better, and what will provide good practice. Hard to comment though for me when not being able to look at the site.

The rel attribute with the color-value isn’t doing anything in this context, and can be removed from the HTML and the JavaScript. See also this demo.

BTW ISO display: table for centering the ul (this can come to bite you later), consider using Flexbox:

.nav-wrap,
#fancy-nav  {
  display: flex;
  justify-content: center;
}

[motionair]

Hi again Atelierbram!

Im slowly getting closer to my dream menu for my webside, much thanks to you!

Im afraid that my WP theme support does not cover customization of menus, so i have met a wall when it comes to the .current-menu-item I tried adding it directly over the them menu code with no luck.. are there any tips or directions you can point to ?

I did some testing in This CodePen Test. with no luck.. now it just stays orange, and the mountain (what used to be a mask) is still stuck in the middle… I thaught that when linking to “#” the movement code should work in the test also?

Either way, i started tweaking the animation speed, and cant really say i get anywhere there either.. (added the duration: “slow”, tag with no luck

$("#fancy-nav a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
duration: "fast",
//backgroundColor: $el.attr("rel")
})

My main code pen.

If you have any more tips, that would be great! if not i have to thank you for getting me here :)

-Reiel

[motionair]

Ps. dev-tools and inspecting elements has helped me a lot, but with active menu items and so on it didnt really do any difference..

here is a no-privilage user if you are curious :)
Motion Air Website.
user: Atelierbram
pw: 6^3pZ3!M1YGofNcSbJdxVJYB

[Atelierbram]

Im afraid that my WP theme support does not cover customization of menus, so i have met a wall when it comes to the .current-menu-item I tried adding it directly over the them menu code with no luck

Don’t know any better than WordPress giving the current menu item a class, so why your theme doesn’t allow for this is a mystery to me.
When wanting to build upon a WordPress theme which allows for more of a blank canvas, I can recommend Underscores theme. IMO it’s better to set the current-menu-item in PHP, and when building a custom menu, one can do things like:

    <li class="<?php if (is_page( "about" )) echo 'current-menu-item'; ?> menu-item">
      <a href="<?php echo $url; ?>/about/" class="menu-link"> about </a>
    </li>   

But there’s more ways to skin a cat, javascript to the rescue:

$(function() {

  var $el, leftPos, newWidth;
  $mainNav2 = $("#fancy-nav");

 $(".page-id-163 #fancy-nav li:nth-child(1)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-10 #fancy-nav li:nth-child(2)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-344 #fancy-nav li:nth-child(4)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two");
 $(".page-id-12 #fancy-nav li:nth-child(5)").addClass("current_page_item_two").siblings("li").removeClass("current_page_item_two"); 

  $mainNav2.append("<li id='magic-line-two'></li>"); 

// rest of code 

Taking advantage of the WordPress body class, which adds the current page-id as a class on the body tag, we can now target the current list item with this, together with the nth-child selector that is, which matches the current item. When pasting this piece of jQuery javascript inside the function, then the current_page_item_two class is added to the current menu item, and removed from any other “sibling”-list-item. Which should make the hovering of the menu-links work as aspected.

[Atelierbram]

On tweaking the animation speed, better try it like this:

$magicLineTwo.stop().animate({
      left: leftPos,
      width: newWidth
     // duration: "slow"
      //backgroundColor: $el.attr("rel")
  },
    "slow"); 

  }, function() {
// rest of code

Syntax is tricky, I look it up all the time.

[motionair]

Atelierbram, thanks for helping me out on this project. now i´m really happy about the new menu. Ive gotten better at CSS and JS, so i´m hoping the next challanges are easier to solve.
last little question, the display: flex; shows two word text on two lines. Is there a way to force it to show all items on one line, then use the following code to hide it for mobile?

@media only screen and (max-width: 900px) {
  #fancy-nav {
    flex-direction: column;
  }
  #fancy-nav #magic-line-two {
  visibility: hidden;
  }
}

Thanks!

[Atelierbram]

Glad to be of help.

shows two word text on two lines.

white-space property can force text not to “wrap” on two lines.

#fancy-nav {
  /* stuff */
  text-align: center;
}
#fancy-nav li {
  /* stuff */
  white-space: nowrap;
}

[Author]

Posts