I am building a nav bar, where if you hover over an a item in the nav bar, it will add a class named nav-hover that adds certain styling to a when hovered.
Let me know if there is a better way to implement this, but in each li, I have added it's unique selector inside navIn()````. Which method can I use that would automatically extract the selector. Usingthis``` didn't work.
function navIn(obj) {
document.querySelector(obj).classList.add('nav-hover');
}
function navOut(obj) {
document.querySelector(obj).classList.remove('nav-hover');
}
<div class="navbar" id="navbar">
<div class="container" id="nav-position">
<ul class="nav">
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(1)')"><a data-scroll href="#about">About</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(2)')"><a data-scroll href="#work">My Work</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(3)')"><a data-scroll href="#">Resume</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(4)')"><a data-scroll href="#contact">Contact</a></li>
</ul>
</div>
</div>
You can use the :hover pseudo-class to achieve the same hover effect:
EDIT: You can achieve the underline effect with just CSS. You can create the underline using pseudo-elements and apply transition effects onto it as shown below:
* {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-around;
height: 70px;
background: rgba(0, 0, 0, 0.25);
}
/* Set the position on your <a> tag so the pseudo-element will position relative to it. */
.nav-link {
position: relative;
}
/* Create the underline element for each <a> tag */
.nav-link::before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 2px;
background: blue;
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms ease;
}
/* Apply the :hover pseudo-class on the pseudo-elements */
.nav-link:hover::before {
transform: scaleX(1);
transform-origin: left;
}
<nav>
<ul class="nav">
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">My Work</a></li>
<li><a class="nav-link" href="#">Resume</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
Related
I have the following code.
How can I affect the status of other links when the cursor is on a link?
For example I would like that when the mouse is over a link I can affect the opacity of the other links.
I thought of a way to add the event to the link parent nav links and then check if the event is really on the link or outside.
Is the method I started good or I should approach event delegation
const nav = document.querySelector(".nav__links");
const item = Array.from( document.querySelectorAll(".nav__item"));
const link = Array.from( document.querySelectorAll(".nav__link"));
link.forEach(t => t.addEventListener('mouseover' ,function(e){
const targetLink = e.target ;
console.log(targetLink) ;
if ( t !==targetLink) {
t.style.opacity = 0.2;
}
})) ;
.nav__links {
display: flex;
align-items: center;
list-style: none;
justify-content:center;
}
.nav__item {
margin-left: 0.7rem;
}
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">About</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Testimonials</a>
</li>
If you're okay with dimming the options when the mouse is over the nav list and then not dimming the active one, you can do this just with CSS (I added a bit of transition to it, but you can remove that):
.nav__links:hover li {
opacity: 0.2;
transition: opacity 0.1s;
}
.nav__links:hover li:hover {
opacity: 1;
}
Live Example:
.nav__links {
display: flex;
align-items: center;
list-style: none;
justify-content: center;
}
.nav__links:hover li {
opacity: 0.2;
transition: opacity 0.1s;
}
.nav__links:hover li:hover {
opacity: 1;
}
.nav__item {
margin-left: 0.7rem;
}
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">About</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Testimonials</a>
</li>
</ul>
That also has the advantage that there's no flashing as you move the mouse across from one nav item to the next (going out of one li, over the ul, then into the next li).
But if you only want them dimmed when one of the nav items is hovered, I don't think we can do it just with CSS because there's no general sibling combinator (there's just the next sibling [+] or subsequent sibling [~]).
But we can let CSS do most of the work. The trick is making sure that we un-dim things when the mouse is no longer over any of the nav items. Remember that the mouse can jump out of elements (for instance, if the user Alt+Tabs to a different app, moves the mouse, and then tabs back to the page), so we have to be fairly aggressive about un-dimming things.
Here's a version that uses a passive mousemove handler on the document. Normally I'd avoid a mousemove handler on document since it will get fired a lot, but what we're doing inside the handler is really quick:
document.addEventListener("mouseover", event => {
const li = event.target.closest(".nav__links li");
if (li) {
nav.classList.add("dimmed");
} else {
nav.classList.remove("dimmed");
}
}, {passive: true});
Then we throw some CSS at it:
.nav__links.dimmed li {
opacity: 0.2;
transition: opacity 0.1s;
}
.nav__links.dimmed li:hover {
opacity: 1;
}
Live Example:
const nav = document.querySelector(".nav__links");
document.addEventListener("mouseover", event => {
const li = event.target.closest(".nav__links li");
if (li) {
nav.classList.add("dimmed");
} else {
nav.classList.remove("dimmed");
}
}, {passive: true});
.nav__links {
display: flex;
align-items: center;
list-style: none;
justify-content: center;
}
.nav__links.dimmed li {
opacity: 0.2;
transition: opacity 0.1s;
}
.nav__links.dimmed li:hover {
opacity: 1;
}
.nav__item {
margin-left: 0.7rem;
}
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">About</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Testimonials</a>
</li>
</ul>
I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.
please see the picture for more information;
when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?
many thanks!
My code;
<div id="knoppen">
<div id="Plaat" onclick="URL" onmouseover="ShowP()">
<button id="plaatknop">Platenwarmtewisselaar </button>
</div>
<div id="buis">
<button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button>
</div>
<div id="productenplaat">
<div id="gelast">
<button id="gelastknop">Gelasteplatenwisselaar </button>
</div>
<div id="gesoldeerdplaat">
<button id="gesoldeerdknop">gesoldeerde platenwisselaar</button>
</div>
<div id="pakkingenplaat">
<button id="pakkingenknop">platenwisselaar met pakkingen</button>
</div>
</div>
You can use like below code
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Platenwarmtewisselaar </li>
<li class="submenu">Buizenwarmtewisselaar >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Gelasteplatenwisselaar </li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
I'm trying to make the slideToggle work but couldn't figure out. As per different answers, I tried adding display: block and display: none but that isn't working either.
JSFiddle Demo: https://jsfiddle.net/987cndtv/
JS:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").slideToggle();
/* jQuery(this).next("ul").toggle(); */
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
CSS:
.menupolicies .parent {
padding: 5px 0;
display: block;
}
.menupolicies .parent ul {
display: none;
}
The issue is with the version (3.3.1.slim.min.js) of jQuery you are using which does not have the animation effect required in slideToggle(). Try with some other version:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").slideToggle();
//jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
display: block;
}
.menupolicies .parent ul {
display: none;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Trying to implement a custom navigation menu, in which for a mobile-responsive design, I decided to use a horizontal-scrolling feature on the nav menu container to display the main items (horizontally). These items have sub-items that are displayed vertically (like in a list).
After adding the horizontal scroll, scrolling to the right from its original position causes the sub-items, which displays when hovering over its parent item, to move further right, thereby making it unaligned with its parent.
I've tried adding js code that calculates distance based on the scroll percentage and adjust the sub-items to better align with its parent but im getting varying results.
Here is my code so far:
// $('.menu-container').scroll(function(){
// var scrollPercentage = 100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
// console.log(scrollPercentage.toFixed(2));
// $(".menu > ul > .page_item_has_children > .children").css("margin-left", 100 / (-1.55 * scrollPercentage.toFixed(2)));
// });
#import url('https://fonts.googleapis.com/css?family=Crimson+Text|Libre+Franklin');
body {
font-family: 'Crimson Text', serif;
/* font-family: 'Libre Franklin', sans-serif; */
}
/***** Start: Forms *****/
.searchform {
display: inline-flex;
margin: 0 auto;
}
/***** End: Forms *****/
/***** Start: Navigation *****/
/*** Start: Menus ***/
.menu-container {
display: flex;
white-space: nowrap;
overflow-x: scroll;
align-items: center;
}
.menu-container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
background-color: #F5F5F5;
}
.menu-container::-webkit-scrollbar {
width: 0.25rem;
height: 0.25rem;
background-color: #F5F5F5;
}
.menu-container::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
.menu {
display: inline-flex;
margin: 0 auto;
}
.menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu>ul>li {
display: inline-flex;
padding: 0 0.5rem;
height: 2.75rem;
/* max-width: 15rem; */
/* width: 8rem; */
/* Adjust this value depending on the longest length of the navigation menu's main link items */
}
.menu a {
text-decoration: none;
display: flex;
align-items: center;
}
.menu>ul>.page_item_has_children>.children {
padding: 2rem 0 0 0;
}
.menu li li {
margin-left: -0.5rem;
}
.menu li {
/* background: #000; */
}
.children {
margin: 1rem 0;
padding: 0rem;
position: absolute;
}
.children a {
width: 100%;
padding: 0 0.5rem;
}
.children .page_item_has_children .children {
display: inline-block;
margin: 0rem;
left: 15rem;
/* Adjust this value depending on the longest length of the navigation menu's sub-items */
}
.children>li {
visibility: hidden;
opacity: 0;
display: none;
height: 4rem;
/* Adjust this value depending on the height of the navigation menu's sub-items */
}
.children .page_item_has_children .children>li {
/*left: 1rem;*/
/*position: relative;*/
}
li:hover>.children>li {
display: flex;
visibility: visible;
opacity: 1;
max-width: 25rem;
width: 15rem;
}
/*** End: Menus ***/
/***** End: Navigation *****/
/***** Start: Media *****/
#media screen and (max-width: 1200px) {
/*** Start: Searchform *****/
/*** End: Searchform ***/
/*** Start: Menus ***/
/*** End: Menus ***/
}
/***** End: Media *****/
<div class="menu-container">
<div class="menu">
<ul>
<li class="">Home</li>
<li class="">Front Page</li>
<li class="">Blog</li>
<li class="page_item_has_children">
About The Tests
<ul class="children">
<li class="">Page Image Alignment</li>
<li class="page_item_has_children">
Page Markup And Formatting
<ul class="children">
<li class="">Formatting Content with Images</li>
</ul>
</li>
<li class="page_item_has_children">
Clearing Floats
<ul class="children">
<li class="">Clearing Floats Part 1</li>
<li class="">Clearing Floats Part 2</li>
</ul>
</li>
<li class="page_item_has_children">
Page with comments
<ul class="children">
<li class="">This Page Is Served With at Least 10 Comments using Disqus</li>
</ul>
</li>
<li class="">Page with comments disabled</li>
</ul>
</li>
<li class="page_item_has_children">
Level 1
<ul class="children">
<li class="page_item_has_children">
Level 2
<ul class="children">
<li class="page_item_has_children">
Level 3
<ul class="children">
<li class="">Level 4</li>
</ul>
</li>
<li class="">Level 3a</li>
<li class="">Level 3b</li>
</ul>
</li>
<li class="">Level 2a</li>
<li class="">Level 2b</li>
</ul>
</li>
<li class="">Lorem Ipsum</li>
<li class="">Page ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuv</li>
<li class="">Page B</li>
</ul>
</div>
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" /><i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</div>
And this is the expected results during scrolling, no matter how far right it reaches:
> Parent item > Parent item > Parent item
> child item
> child item
> child item
And this is what i'm getting:
> Parent item > Parent item > Parent item
> child item
> child item
> child item
To better see what I mean, try resizing the browser when looking at the menu to under 1200px.
Added this piece of jquery code on my project which calculates scroll value based on its displacement:
$('.menu-container').scroll(function() {
var menuContainerScrollVal = $(".menu-container").scrollLeft();
$(".menu > ul > .page_item_has_children >.children").css("margin-left", -menuContainerScrollVal);
});
This solved my problem and got me the expected solution.
I'm trying to make a new cool menu animation for my website. But i can't get the menu to animate smoothly.
When I click on a menu item, javascript set a remove all classes "selected" from menu items and add "selected" to menu item that is clicked.
The menu html
<div class="piranya-menu-wrapper responsive">
<ul id="piranya-menu-2" class="piranya-menu open">
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;">Forside</li>
<li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;">
<img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon">Løsninger <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">Webshop</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">SEO</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Hosting og drift</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last">Special løsninger</li>
</ul>
</li>
<li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;">
<img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon">Platform <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">CMS</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">E-commerce</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Social Media</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">Markedsføring</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate">Booking</li>
<li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate">Apps</li>
<li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last">Integration</li>
</ul>
</li>
<li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;">
<img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon">Cases <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last">Infoscreen</li>
</ul>
</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;">
<img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon">Support
</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;">
<img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon">Kontakt
</li>
<div class="close-btn"></div>
</ul>
</div>
The css for the menu
header .piranya-menu
{
display: flex;
width: 100%;
}
#piranya-menu-2 > .piranya-menu-item-first
{
display: none;
}
header .piranya-menu-wrapper.responsive > ul > li
{
padding: 0px 8px;
cursor: pointer;
transition: flex 1000ms ease;
}
header .piranya-menu-wrapper.responsive > ul > li > a
{
color: white;
clear: both;
width: 100%;
float: left;
font-size: .8em;
text-align: center;
}
header .piranya-menu-wrapper.responsive > ul > li.selected
{
flex: 1;
}
header .piranya-menu-wrapper.responsive > ul > li.selected > a
{
line-height: 60px;
clear: none;
width: auto;
font-size: 1em;
padding-right: 5px;
background-color: #00253b;
}
#piranya-menu-2 > li.selected > img
{
height: 32px;
padding: 14px 10px 14px 5px;
margin: 0;
background-color: #00253b;
float: left;
}
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover
{
background-color: rgba(0, 37, 59, 0.5);
}
header .piranya-menu-wrapper.responsive > ul > li > img
{
height: 24px;
margin: 8px auto;
float: none;
display: block;
}
But it doesn't look correct. When a menu item is clicked, the text is on a new line and a split second later it's show correctly - Any ideas anyone?
You can see the site here
http://piranya.dk/velkommen
Best Regards
Alex Sleiborg
Do this to fix the animation:
body > div.main-wrapper > div > header > div.lower > div > div {
max-height: 60px
}
It will prevent the container from expanding to a larger size.
is this smoother yet? javascript doesn't involved yet. And i just removed the sub-menu to see the progress step by step.
header{
width:100%;
position:relative;}
.upper, .lower{
width:100%;
position:relative;
display:flex;
}
.upper{
background:#ccc;
padding:10px 0;
}
.upper img{
width:200px;}
.lower{
background:#000;}
.center{
width:80%;
color:#fff;
text-decoration:none;
align-self:center;
margin:0 auto;}
.center a{
text-decoration:none;
color:#fff;
transition: all 1s ease-in-out}
.lower ul{
list-style: none;
padding:0;
margin:0;
display:flex;
flex-direction:row;
}
.lower li{
height:54px;
width:36px;
margin:5px;
display:flex;
align-items:center;
display:flex;
flex-direction:column;
transition: all 1s ease-in-out
}
.lower img{
height:32px;
margin:2px;
transition: all 1s ease-in-out
}
.lower li:hover{
flex-direction:row;
transition:all 1s ease-in-out;
width:160px;
}
<header>
<div class="upper">
<div class="center">
<img src="http://piranya.dk/image/8254">
</div>
</div>
<div class="lower">
<div class="center">
<ul>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
</ul>
</div>
</div>
</header>