I have 5 links on my vertical nav. On screen resize my vertical nav becomes a horizontal nav with three (of those 5 links) showing and another link called menu which displays the other two remaining links.
For some reason, on screen resize, when menu appears, the list content is already displayed and then when menu is clicked, it leaves the hover properties even when you're not hovering over it. Here are visuals:
1. On screen resize, it appears like this:
2. When hovering over menu:
Which is OK. I only want the links to appear when the menu link is clicked, not hovered over. But I do not understand why menu talking up two li spaces.
3. When clicking menu:
This is OK. However, note how the Menu li is now perfectly sized.
4. After clicking on menu and then moving the mouse away from the link: 
As mentioned, I do not know what's causing these issues.
Here is my current approach:
$(document).ready(function() { $(".show").click(function() { $(".subMenu").toggleClass("active"); return false; }); });.site-wrapper { height: 100%; min-height: 100%; display: flex; } /* make divs appear below each other on screen resize */ @media screen and (max-width: 540px) { .site-wrapper { flex-direction: column; } } ul.subMenu { display: none; } .subMenu.active { display: flex; flex-direction: column; } li.show { display: none; } .nav-container { border-right: 1px solid #E4E2E2; height: 100%; width: 200px; background-color: #f4f3f3; } .logo-holder { text-align: center; } .nav { text-align: justify; } nav:after { content: ""; display: table; clear: both; } .nav-link { display: block; text-align: left; color: #333; text-decoration: none; margin-left: 0px; padding-left: 15px; } .nav-link:hover { background-color: #333; color: #f4f3f3; } .nav ul { width: 100%; /* make div span div */ padding: 0px; } .nav ul li { list-style-type: none; } .nav li:hover a { color: #f4f3f3; } .active { text-align: left; padding-left: 15px; text-decoration: none; background-color: #333; color: #f4f3f3; } @media screen and (max-width: 540px) { .nav-container { width: 100%; height: 100px; background-color: #f4f3f3; border-bottom: 0.5px solid #f4f3f3; } .nav-link { padding: 10px; } .logo-holder { overflow: hidden; display: block; margin: auto; width: 40%; } .nav-container nav ul { display: flex; flex-wrap: wrap; justify-content: center; } .logo-holder { text-align: left; } #navigation-div { background-color: #f4f3f3; margin-top: 0; } .socials { display: none; } .hide { display: none; } .show { display: inline-block !important; } .nav ul li {} }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="site-wrapper"> <div class="nav-container"> <div class="logo-holder"> <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" /> </div> <div id="navigation-div"> <nav class="nav"> <ul> <li><a class="nav-link active" href="">Test 1</a></li> <li><a class="nav-link " href="">Test 2</a></li> <li><a class="nav-link" href="">Test 3</a></li> <li class="hide"><a class="nav-link hide" href="">Test 4</a></li> <li class="hide"><a class="nav-link hide" href="">Test 5</a></li> <li class="show"><a class="nav-link" href="">Menu</a> <ul class="subMenu"> <li><a class="nav-link" href="">Test 4</a></li> <li><a class="nav-link" href="">Test 5</a></li> </ul> </li> </ul> </nav> </div> </div> </div>3 Answers
Answers 1
Explanation:
You have so many things messed up. Most important to note is that sub elements are inheriting from main elements. For example, if we have the following HTML:
<ul id="main_menu"> <li>list item 1</li> <li>list item 2</li> <li> <ul id="sub_menu"> <li>sub list item 1</li> </ul> </li> </ul> And this CSS:
#main_menu li {/* This styling will also be applied to sub_menu!! */ color: red; } So if you want to apply to only direct li under main menu, use > which means only direct elements, like so:
#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */ color: red; } Fixing the problem:
1- Add !important to sub menu:
ul.subMenu { display: none !important; } 2- Comment or remove this line:
.nav li:hover a { /* color: #f4f3f3; */ } 3- Your sub menu is inheriting some unwanted styling from the main menu. Add these should fix it for you:
.subMenu a.nav-link { background-color: #f4f3f3; color: #333; } .subMenu a.nav-link:hover { background-color: #333; color: #f4f3f3; } .subMenu.active { display: block !important; } Here's a demo.
Answers 2
For some reason, on screen resize, when menu appears, the list content is already displayed
You can use jQuery's resize function to do stuff when you resize.
But I do not understand why menu talking up two li spaces.
Menu is taking up two li spaces because it contains a ul that is two spaces wide which is forcing it's width. Adding a width to the anchor tag will make it look a little better as it won't inherit the width from the li. a.nav-link { width: 50px;}
After clicking on menu and then moving the mouse away from the link.
Add a class to the parent of the submenu using jQuery so you can control styling.
Here's the code, hope it helps!
jQuery
$(document).ready(function() { $(".subMenu").addClass('hide'); $(".show").click(function() { $(".show").toggleClass('active-parent'); $(".subMenu").toggleClass("active"); $(".subMenu").toggleClass("hide"); return false; }); }); $(window).resize(function(){ $(".subMenu").addClass('hide'); }); html
<div class="site-wrapper"> <div class="nav-container"> <div class="logo-holder"> <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" /> </div> <div id="navigation-div"> <nav class="nav"> <ul> <li><a class="nav-link active" href="">Test 1</a></li> <li><a class="nav-link " href="">Test 2</a></li> <li><a class="nav-link" href="">Test 3</a></li> <li class="hide"><a class="nav-link hide" href="">Test 4</a></li> <li class="hide"><a class="nav-link hide" href="">Test 5</a></li> <li class="show"><a class="nav-link" href="">Menu</a> <ul class="subMenu"> <li><a class="nav-link" href="">Test 4</a></li> <li><a class="nav-link" href="">Test 5</a></li> </ul> </li> </ul> </nav> </div> </div> </div> css
.site-wrapper { height: 100%; min-height: 100%; display: flex; } /* make divs appear below each other on screen resize */ @media screen and (max-width: 540px) { .site-wrapper { flex-direction: column; } } ul.subMenu { display: none; } .subMenu.active { display: flex; flex-direction: column; } li.show { display: none; } .nav-container { border-right: 1px solid #E4E2E2; height: 100%; width: 200px; background-color: #f4f3f3; } .logo-holder { text-align: center; } .nav { text-align: justify; } nav:after { content: ""; display: table; clear: both; } .nav-link { display: block; text-align: left; color: #333; text-decoration: none; margin-left: 0px; padding-left: 15px; } .nav-link:hover { background-color: #333; color: #f4f3f3; } .nav ul { width: 100%; /* make div span div */ padding: 0px; } .nav ul li { list-style-type: none; } .nav li:hover a { color: #f4f3f3; } .active { text-align: left; padding-left: 15px; text-decoration: none; background-color: #333; color: #f4f3f3; } @media screen and (max-width: 540px) { .nav-container { width: 100%; height: 100px; background-color: #f4f3f3; border-bottom: 0.5px solid #f4f3f3; } .nav-link { padding: 10px; } .logo-holder { overflow: hidden; display: block; margin: auto; width: 40%; } .nav-container nav ul { display: flex; flex-wrap: wrap; justify-content: center; } .logo-holder { text-align: left; } #navigation-div { background-color: #f4f3f3; margin-top: 0; } .socials { display: none; } .hide { display: none; } .nav-container nav .hide{ display: none; } .show { display: inline-block !important; } a.nav-link { width: 50px; } .active-parent a.nav-link { color: #ffffff; background: #333; } .nav ul li {} } Answers 3
No 2.
You're setting both ul to display as flex, change it so it will only applied to parent ul only
.nav-container nav>ul { display: flex; flex-wrap: wrap; justify-content: center; } Cosmetic for your second level links when user click the menu
.selected a, .active a { background-color: #333; color: #f4f3f3; } I also added some class to make styling easier when the menu is open
$(this).toggleClass('selected'); (function($) { $(document).ready(function() { $(".show").click(function() { $(this).toggleClass('selected'); $(".subMenu").toggleClass("active"); return false; }); }); })(jQuery);.site-wrapper { height: 100%; min-height: 100%; display: flex; } /* make divs appear below each other on screen resize */ @media screen and (max-width: 540px) { .site-wrapper { flex-direction: column; } } ul.subMenu { display: none; } .subMenu.active { display: flex; flex-direction: column; } li.show { display: none; } .nav-container { border-right: 1px solid #E4E2E2; height: 100%; width: 200px; background-color: #f4f3f3; } .logo-holder { text-align: center; } .nav { text-align: justify; } nav:after { content: ""; display: table; clear: both; } .nav-link { display: block; text-align: left; color: #333; text-decoration: none; margin-left: 0px; padding-left: 15px; } .nav-link:hover { background-color: #333; color: #f4f3f3; } .nav ul { width: 100%; /* make div span div */ padding: 0px; } .nav ul li { list-style-type: none; } .nav>li:hover a { color: #f4f3f3; } .active { text-align: left; padding-left: 15px; text-decoration: none; background-color: #333; color: #f4f3f3; } .selected a, .active a { background-color: #333; color: #f4f3f3; } @media screen and (max-width: 540px) { .nav-container { width: 100%; height: 100px; background-color: #f4f3f3; border-bottom: 0.5px solid #f4f3f3; } .nav-link { padding: 10px; } .logo-holder { overflow: hidden; display: block; margin: auto; width: 40%; } .nav-container nav>ul { display: flex; flex-wrap: wrap; justify-content: center; } .logo-holder { text-align: left; } #navigation-div { background-color: #f4f3f3; margin-top: 0; } .socials { display: none; } .hide { display: none; } .show { display: inline-block !important; } .nav ul li {} }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="site-wrapper"> <div class="nav-container"> <div class="logo-holder"> <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" /> </div> <div id="navigation-div"> <nav class="nav"> <ul> <li><a class="nav-link active" href="">Test 1</a></li> <li><a class="nav-link " href="">Test 2</a></li> <li><a class="nav-link" href="">Test 3</a></li> <li class="hide"><a class="nav-link hide" href="">Test 4</a></li> <li class="hide"><a class="nav-link hide" href="">Test 5</a></li> <li class="show"><a class="nav-link" href="">Menu</a> <ul class="subMenu"> <li><a class="nav-link" href="">Test 4</a></li> <li><a class="nav-link" href="">Test 5</a></li> </ul> </li> </ul> </nav> </div> </div> </div>
0 comments:
Post a Comment