I thought I'd re-write this post as I don't think I made myself clear originally - so apologies for that! Thought it best to edit rather than create a new thread.
I have a sliding line on my main navigation, so on hover the line animates/slides to the item you've hovered over from it's current position (which should be the current page).
Example: https://codepen.io/moy/pen/Yjqrqo
The problem I'm having is when there is no current_menu_item class on a menu item it breaks.
80% of the time there will be a 'selected' menu item but there are some instances when you're on terms, privacy, contact (footer links) pages where there isn't a main nav item to relate to.
Ideally when there isn't a selected item I'd like the line to fade in on hover, then slide about from there. Then if you don't click anything and leave the menu again the line will fade out. But I'm open to suggestions. Hope someone can help!
$(function() {
var $el, leftPos, newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line");
$magicLine
.width($(".current-menu-item").width())
.css("left", $(".current-menu-item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$(".site-nav__list li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
/* MIXIN */
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
/* Body */
body {
background: #f9f9f9;
margin: 0;
padding: 5px 0 0;
}
/* Header */
.page-head {
background: white;
border-top: 2px solid #ddd;
box-sizing: border-box;
@include clearfix;
padding: 0 30px;
position: relative;
width: 100%;
}
.page-head__logo {
background-image: none;
float: left;
padding: 0;
text-shadow: none;
width: 200px;
}
/* Nav */
.site-nav {
display: block;
float: right;
text-align: center;
width: auto;
}
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: auto;
left: auto;
width: auto;
}
.site-nav__list li {
background: none;
display: inline-block;
margin: 0;
padding-left: 0;
text-transform: uppercase;
&.current-menu-item {}
}
.site-nav__list a {
box-sizing: border-box;
display: block;
font-weight: 900;
padding: 30px 15px;
transition: color .15s;
text-shadow: none;
&:hover {
color: red;
}
}
/* Underline */
.site-nav__line {
background: red;
content: "";
display: block;
height: 2px;
position: absolute;
top: -2px;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header class="page-head">
<a href="#" class="page-head__logo">Logo Here </a>
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__item current-menu-item"><a href="#" class="site-nav__link">Home</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Looooonger Title</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Company</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link">Login</a></li>
<li class="site-nav__item"><a href="#" class="site-nav__link amp">Apply</a></li>
</ul>
</nav>
</header>
</body>
from Navigation sliding line on hover - when no item is 'current' or 'selected'
No comments:
Post a Comment