I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.
Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>
You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.
Related
Hi im wondering how i can make my navbar also active so when im on my secton page for about for example. I want the red line to be under About and so on. How do i accomplish that?
I have been struggeling to make it active but cant do it and its the last thing and then im 100% satisfied with my page... well atleast for now... please help me would love all the help i can get.
window.addEventListener('scroll', function(){
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
<!---Sticky navbar---->
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: white;
text-decoration: none;
}
header.sticky ul li a{
color: black;
}
header ul li a::after{
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after{
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a class="active" href="#home" onclick="toggleMenu();">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!--Front page image and text-------------------------------------------------------------------------------------------------------------------------------------------------->
<section class="landing-page" id="home">
You could create the function toggleMenu(element) which adds a class active to the given element and remembers it until the next call. When the function is called the next time it first checks if there is an active menu entry and deactivates it.
Consider the following code:
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
let elActiveAnchor = null;
function toggleMenu(elAnchor) {
elActiveAnchor?.classList.remove('active');
(elActiveAnchor = elAnchor).classList.add('active');
}
toggleMenu(document.getElementById("menu-home"));
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
display: inline-block;
margin: 0 15px;
color: gray;
text-decoration: none;
}
header.sticky ul li a {
color: black;
}
header ul li a::after {
content:'';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
header ul li a:hover::after,
/* This is the new selector for the "active" menu entry */
header ul li a.active::after {
width: 100%;
}
<header>
MajorJammbaa
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a id="menu-home" href="#home" onclick="toggleMenu(this)">Home</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
<!-- Front page image and text -->
<section class="landing-page" id="home">
I am working on a website where I am trying to achieve the following:
When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.
HTML:
<div class="menu-container-portal">
<a class="toggle-menu" href="#" style="display: none;">
<img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
<ul class="nav">
<li class="">
Upplev & Besök
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li class="">
Bostäder
</li>
<li>
Evenemang
</li>
<li>
Kopia (1) av Upplev & Besök
</li>
<li>
Kopia (4) av Bostäder
</li>
<li>
Mat och dryck
</li>
<li>
Shopping
</li>
</div>
</ul>
</li>
<li>
Bo & Leva
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Flytta hit & Jobba
</li>
<li>
Näringsliv
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Kontakta oss
</li>
</ul>
</div>
CSS:
.menu-container-portal ul {
margin: 0;
padding: 0;
}
.active {
background: #2b90f5;
overflow: hidden;
}
.menu-container-portal li:hover>a {
color: #fff;
background: #304040;
opacity: .7;
}
.menu-container-portal li {
margin: 0;
padding: 0;
/*width: 100%;*/
height: 15%;
/*display: inline-block;*/
;
}
.menu-container-portal a {
text-decoration: none;
}
.menu-container-portal a:hover {
color: #dadcdf;
background: #304040;
padding-bottom: 10px;
}
/*.menu-container-portal {
max-width: 900px;
margin: 10px auto;
}*/
/*.menu-container-portal {
max-width: 900px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 15px;
white-space: nowrap;
text-align:left;
} */
.menu-container-portal {
max-width: 1100px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
/* margin-left: 15px; */
white-space: nowrap;
text-align: left;
margin-left: 22.5%;
}
.toggle-menu {
display: none;
/*background: #404040;*/
padding: 10px 15px;
color: #fff;
}
.toggle-menu:hover {
opacity: 0.7;
}
.nav {
list-style: none;
*zoom: 1;
/*background:#404040;*/
display: flex;
justify-content: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 100%;
text-align: center;
}
.nav a {
padding: 10px 15px;
color: #101210;
*zoom: 1;
}
.nav>li {
float: left;
z-index: 200;
}
.nav>li>a {
display: inline-block;
}
.nav li ul {
display: flex;
position: absolute;
left: -99999px;
z-index: 100;
width: 100%;
/*height: 100%;*/
padding-bottom: 0.5em;
justify-content: left;
}
.nav li li a {
display: block;
/* display:inline-block; */
/*background: #404040;*/
/*position: relative;*/
z-index: 99999;
/*height: 100%;*/
width: auto;
/* width:100%; */
color: #fff;
}
.nav li li li a {
background: #404040;
/* z-index:200; */
;
}
.nav li {
/*position: relative;*/
;
}
.nav>li.hover>ul,
.nav>li.hover>ul :active {
left: 0;
overflow: hidden;
}
.nav li li.hover ul {
left: 100%;
top: 0;
overflow: hidden;
}
.arrow {
display: none;
}
.sub {
background: #304040;
opacity: 0.9;
}
ul .sub {
padding-top: 10px;
}
.menu-container-portal a:hover .nav li li li a {
background: #ff0000;
}
/* Bestämma undermenyns storlek */
.sub2 {
column-width: auto;
text-align: left;
}
.test1 {
display: inline-flex;
margin-left: 22.5%;
}
.test1-show {
display: block;
margin-left: 22.5%;
color: green !important;
}
jQuery:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
/*$(".test1").addClass("active");
$('.nav a').filter(function(){
return this.href==location.href;}).parent()
.addClass('active').siblings().removeClass('active');
/*$(".nav > li > a").addClass("active");*/
$(document).ready(function () {
$('a(.active) a').hide();
$('a(.active)').hover(
function () {
$('.test1').hide();
},
function () {
$('.test1').show();
});
});
}
});
}
Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)
I was thinking about using one of these that I have found here:
http://jsfiddle.net/4G7TJ/1/
http://jsfiddle.net/MGkQC/7/
2019 - 01 - 21:
An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:
jQuery:
$(document).ready(function() {
$(".nav li [href]").each(function() {
if (this.href == window.location.href) {
$(this).css("background", "red");
$(this).addClass("hover");
$(this).parent().find('ul.sub').css("left","0");
}
}); });
I was thinking about using .toggle somehow but cant really seem to get it working.
Intended you expecting the following functionality:
$("ul.nav > li > a").hover(
function(e) {
$('ul.nav > li > a.on-hover').removeClass('on-hover');
$(this).addClass('on-hover');
},
function(e){
//If you expecting to hide on-hover-out as well, uncomment the below line
//$('ul.nav > li > a.on-hover').removeClass('on-hover');
});
See in action: http://jsfiddle.net/kn761qgL/ and confirm.
Ok this is the effect Im trying to achieve:
And the according HTML:
<div class = "options">
</i> Close
<ul>
<li>
<h3 value = 0>say hi</h3>
<p>(press L)</p>
<img src = "../resources/plus.png"/>
</li>
<li>
<h3 value = 1>Like</h3>
<p>(press L)</p>
<img src = "../resources/plus.png"/>
</li>
<li>
<h3 value =2>commiserate</h3>
<p>(press L)</p>
<img src = "../resources/plus.png"/>
</li>
<li>
<h3 value =3>Ask</h3>
<p>(press L)</p>
<img src = "../resources/plus.png"/>
</li>
</ul>
</div>
I need to horizontally align (with the image in the center vertically of the h3 space) and the p all on the same line within the . My problem is I cant achieve this and have a weird same line issue with first 2 lis:
Here's the CSS:
.options ul {
margin-left: 0;
padding: 0;
margin: 0;
}
.options ul li {
margin: 0;
padding: 0;
float: left;
}
.options {
float: left;
position: fixed;
margin-left: 50%;
left: 50%;
/* background: black; */
margin-left: -100px;
padding: auto;
z-index: 10;
width: 200px;
top: 33%;
}
.options ul li h3 {
margin: 0;
cursor: pointer;
text-transform: uppercase;
text-align: left;
transition: all 90ms ease-out;
}
.options ul li p {
display: none;
}
.options img {
width: 30px;
}
What is the problem here?
The h3 and p tags are block level elements (i.e. display: block by default), so they will each take up a whole 'line' and push the images onto the next line.
Apply display: inline-block to the h3 elements (and p elements) and you should get what you're after. Example on the h3:
.options ul li h3 {
margin: 0;
cursor: pointer;
text-transform: uppercase;
text-align: left;
transition: all 90ms ease-out;
/* add this */
display: inline-block;
}
The left float on .options ul li also might be causing a separate issue, but I'm not sure if it's an effect you want.
I got a question regarding showing a submenu with CSS.
I have the following HTML code:
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>
Due to implementation restriction I can not change my structure to, for example a <ul> format.
I did some research on the web to find out how I could show my submenu by using CSS. I tried the following thing:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Can anyone tell my why this does not work and how could I solve this, with respect to my current implementation.
Full code here: JSFIDDLE
PS. Any answers like use bootstrap or transform your menu to a <ul> format is not what I am looking ;)
Your code:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Your .submenu is not inside the a. You could use the sibling selector:
.navigation .submenu-wrapper a:hover + .submenu{display:block;}
But to make the submenu usable, make sure your .submenu-wrapper has the same height as its content (by giving it a fixed height or an :after{clear:both;} and do this:
.navigation .submenu-wrapper:hover .submenu{display:block;}
Since your .submenu is absolutely positioned, you also need to position its parent, or else .submenu will fall off the screen (because you gave it top:100% relative to body). Like this:
.navigation .submenu-wrapper {position: relative;}
Updated fiddle: https://jsfiddle.net/xrtjngdr/4/
You can achieve this by changing
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
To .navigation .submenu-wrapper a:hover + .submenu{display:block;}
You also have to add
.submenu:hover{
display:block;
}
Because if you want to click on your submenu, the links will disappear
Just a few small changes and you're golden.
See the comments in the code below for your changes.
.navigation {
margin: 0;
padding-left: 0;
list-style: none;
float: left;
}
.navigation .submenu-wrapper {
float: left;
display: block;
position: relative; /* add relative position */
}
.navigation > a,
.navigation .submenu-wrapper a {
float: left;
position: relative;
display: block;
font-size: 20px;
padding-right: 14px;
padding-left: 14px;
padding-top: 5.5px;
padding-bottom: 8.5px;
color: #000;
text-decoration: none;
}
.submenu {
position: absolute;
display: none; /* display none */
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
font-size: 18px;
text-align: left;
background-color: #245d94;
border: 1px solid #fff;
border-radius: 0;
box-shadow: none;
border-left: none;
border-right: none;
}
.navigation a:hover {
color: #fff;
background-color: #245d94;
}
.navigation a.active {
color: #fff;
background-color: #e36c0a;
}
.navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */
display: block;
}
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>
I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?
You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle
use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});
Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>