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>
Related
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.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="#about" onClick="testMy()">CART</a></li>
<div>Empty cart add something</div>
</ul>
i'm developing a navigation menu for shopping cart where on right corner side i have created a Link clickable named "CART" so i'm trying to make it like,. when user click on "CART" one div appears with a list of items which he have added into CART and clicking again it will close.
looking for javascript code for that div so div will appear exactly under cart menu link with arrow pointed to cart as showed in image i have attached.
Item list in cart with arrow
My suggestion would be to create a new, absolute positioned element which is set to the right hand side of the screen (just under the nav) using jQuery you can fade in the element.
HTML
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li class="cartButton">CART</li>
</ul>
<div class="cart">
<div>Empty cart add something</div>
</div>
CSS
ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
li.cartButton {
position: absolute;
height: 100%;
padding: 5px 10px;
color: #fff;
right: 0px;
padding-top: 10px;
}
li.cartButton.active {
background-color: #4CAF50;
}
.active {
a {
background-color: #4CAF50;
}
}
.cart {
position: absolute;
display: none;
top: 50px;
right: 0;
width: 400px;
height: 300px;
background-color: #4CAF50;
}
jQuery
$('.cartButton').click(function() {
$('.cartButton').toggleClass('active');
$('.cart').fadeIn();
})
See jsFiddle
Note
You will need to add a condition to fade out the cart element using jquery using the fadeToggle function instead of fadeIn.
Alternatively, It may suite you better to just add a css class to the cart element so you can assign css transitions.
See jsFiddle (Updated with cart arrow)
The cart arrow was created with a square div rotated 45 degrees and place underneath the navigation bar by adding a z-index to the nav. By adding the .cart class, it will only show when the cart button it clicked.
I hope this helps.
I am making a website using html, and now I want to make a dropdown menu wich animates down slowly. This is my code:
<html>
<head>
<style type="text/css">
.nav {
background-color: #25AAA0;
position: fixed;
width: 100%;
margin: 0;
padding: 0;
z-index: 1000;
}
.nav_wrapper {
width: 90%;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover {
background-color: #66C3BC;
}
.nav ul li a,visited {
text-decoration: none;
color: white;
padding: 15px;
display: block;
}
.nav ul li a:hover {
padding: 15px;
}
.nav ul #dropdown {
position: absolute;
background-color: black;
top: 0
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li>Vanilla<ul id="dropdown">
<li>Survival</li>
<li>Creative</li>
</ul></li><li>
Modded</li><li>
Servers</li><li>
Help</li>
</ul>
</div>
</div>
</body>
</html>
This is what it looks like.
What needs to happen is that the black part is behind and not in front of the rest of the navigation menu, so I can slide it down using jQuery. Does anyone know how to do this? I already tried something with z-index, but that doesn't work. And please don't tell me how I can animate the sliding down, I'm not asking that, I'm asking how I can put the black stuff behind the rest of the navigation bar.
I hope you react soon.
.nav ul #dropdown {
position: absolute;
background-color: black;
top: 50px;
}
.nav ul > li {position: relative;}
Be careful about relative and absolute positions.
You can animate it with CSS on :hover event or with javascript. I can help you with this if you wants but it's better for you to try first :)
You can hide it with several ways in CSS like display:none; visibility:hidden; or opacity:0; or height:0;
Here is a CSS solution I've made : See this fiddle
I'm a novice web developer with no real jquery knowledge, so please bear with me. I'm trying to make a simple mobile responsive dropdown menu (ideally I'd like a slide down, but baby steps first). For the most part, I figured it out. However, I assigned my "Unordered List" an ID selector and it doesn't seem to function anymore. What am I overlooking? Thanks in advance!
This is my code: JSFiddle
$(document).ready(function(){
$('#toggle-button').click(function(){
$('#menu').toggleClass('show');
});
});
.show {
display: block;
}
nav {
background: black;
width: 100%;
}
.menu-bar {
width: 100%;
background: black;
height: 50px;
}
#toggle-button {
position: absolute;
top: 15px;
right: 60px;
height: 35px;
width: 35px;
background: red;
cursor: pointer;
display: block;
}
#menu {
list-style: none;
width: 100%;
display: none;
margin: 0px;
padding: 0px;
}
#menu li {
height: 50px;
background: #535252;
}
#menu li a {
display: block;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
text-decoration: none;
cursor: pointer;
}
#menu li:hover {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-bar"></div>
<nav>
<ul id="menu">
<li>Profile</li>
<li>Profile</li>
<li>Profile</li>
</ul>
</nav>
<a id="toggle-button" href="#"></a>
Use:
#menu.show {
display: block;
}
after! you defined your defaults for #menu {
https://jsfiddle.net/nw2wf3uh/6/
or use the not-so-nice !important:
https://jsfiddle.net/nw2wf3uh/7/
.show {
display: block !important; /* if .show is placed before #menu styles in CSS */
}
You can also go the other way around, setting to your #menu a .hide by default:
<ul id="menu" class="hide">
CSS:
.hide {
display: none; /* but remove display:none; from #menu now! */
}
and toggle that .hide class:
$('#toggle-button').click(function(){
$('#menu').toggleClass('hide');
// or simply: $('#menu').toggle();
});
Here you'll not run into overriding styles cause of priority and you'll not have to use the !important fix (but you might have issues with JS-disabled users if that's of any concern (you should not care much but it always depends.)).
I created a little responsive Navigation which works fine. I also want to add a link on the right side of my navigation for "Account".
My idea was to insert a div into a ul but I think that is not w3c conform.
<div class="navigation">
<ul>
<li>Welcome</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">Account</div>
</ul>
Navigation
Here is a JS Fiddle Demo
Important is that i want the "account" on the right side, not side by side with the other navigation items. Under 700px screen size it should be under the contact li.
Should look like this: http://www.directupload.net/file/d/3718/xneivu5d_png.htm
Sorry for my bad english. I hope you can understand my problem and maybe you have a good idea to solve this.
Your .navigation li{ float: left;} CSS is pulling all <li> elements to the left.
Add the <li> tag for "Account" like so, with a new account class.
<li class="account">Account</li>
And add to your CSS:
.account{
float: right !important;
}
Updated JS Fiddle
Also, you're going to have to adjust your media query width for menu collapse since the account is now appearing on a second line in a small screen width just before the menu collapses.
EDIT:
As what I thought you wanted was incorrect, I've decided to update my answer.
http://jsfiddle.net/AlexCharlton/bb26gau3/3/
<body>
<div class="navigation">
<ul>
<li>Winterhalder</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">
<ul>
<li>Account</li>
</ul>
</div>
</ul>
Navigation
</div>
</body>
CSS:
.account {
float:right;
}
get your .account div OUT of the UL, and then you can style it. Like this:
<div class="navigation">
<ul>
<li>Winterhalder
</li>
<li>Me
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
<div class="account">Account</div> Navigation
</div>
then in CSS add this:
`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
#media screen and (max-width: 960px) {
.navigation {
height: auto;
}
.navigation ul {
width: 100%;
display: block;
height: auto;
}
}
#media screen and (max-width: 560px) {
.navigation {
height: auto;
}
.navigation ul {
display: none;
}
.navigation li {
display: block;
float: none;
width: 100%;
}
.navigation a.pull {
display: block;
background-color: #2C3E50;
width: 100%;
position: relative;
}
.navigation a.pull:after {
display: inline-block;
}
.navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}`
You may need some minor adjustments because I'm not 100% sure if this is what you need, but it will help you to find out how to do it. See fiddle here