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
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.
I have taken over a project from another developer that I am trying to clean up and improve. The company who owns the site wanted a one-page layout, so I began building that, but I am having trouble with the responsive navbar, which comes with a dropdown menu. My problem is that when I press one of the links in the dropdown section, it will take me to the correct section of the page, but if I want to go to one of the other links afterwards I have to refresh the page, because the dropdown menu will not appear when I hover over the list item.
I know it sounds confusing, but let me show you the test page I am making, and maybe it will be more clear (I am sorry that it is not in english)
http://www.handig.dk/test/index.html
When you are on the page, hover over the item called "Menukort". You notice that the dropdown menu appears right? Try clicking on one of the links. Once you have done that, try hovering over "Menukort" again. Do you notice that the dropdown menu no longer appears?
Also if you CLICK on "Menukort", you are brought back to the top of the page, which I do not want either.
Do you have any suggestions of how to fix this problem?
Here is the code for the navbar.
The HTML
<section class="navigation">
<div class="nav-container" id="myHeader">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>Forside</li>
<li>Om os</li>
<li> Menukort
<ul class="nav-dropdown">
<li>Frokost</li>
<li>Aften</li>
<li>Drikkevarer</li>
</ul>
</li>
<li>Bordbestilling</li>
<li> Mad ud af huset
<ul class="nav-dropdown">
<li>Take Away</li>
<li>Festbuffet</li>
<li>Brunch</li>
<li>Receptionsmad</li>
</ul>
</li>
<li>Selskaber</li>
<li>Hotellet</li>
<li>Find os</li>
</ul>
</nav>
</div>
</section>
The CSS
.nav-container {
display: flex;
justify-content: center;
max-width: 100%;
margin: 0 auto;
background-color: #f1f1f1;
}
.navigation {
display: flex;
justify-content: center;
height: 70px;
background-color: #f1f1f1;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
nav ul li {
float: left;
position: relative;
background-color: #f1f1f1;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
color: #333;
text-decoration: none;
background-color: #f1f1f1;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: #84a0a8;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: '';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
background-color: #f1f1f1;
}
nav ul li:hover .nav-dropdown {
display: block;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}
.sticky + .nav-container {
padding-top: 102px;
}
/* Mobile navigation */
.nav-mobile {
display: none;
height: 35px;/* ???? */
/*width: 25px;*/
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
position:relative;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle{
position:relative;
padding:10px 35px 16px;
display:table;
margin:-35px auto 0;
}
#nav-toggle span{margin:auto;left:0;right:0;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #333;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
The JavaScript (The slideUp function does not work either for some reason. I cannot get the menu to close after I click on a link in the mobile menu)
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
$('.nav-dropdown li a').on("click", function(){
$('#nav-toggle').slideUp();
});
}); // end DOM ready
})(jQuery); // end jQuery
Here is the problem:
$('html').click(function() {
$('.nav-dropdown').hide();
});
When you put .hide make that the css hide the element and you cant see it replace it.
I added a hover function to toggle the menu just as the click is doing. Right now, the css provides that rule, but gets overwritten by the JQuery after it toggles it closed. Use javascript:void(0) instead of # to avoid anchoring to the top of the page.
Pen:
https://codepen.io/richiegarcia/pen/oNxmXGK
(function($) { // Begin jQuery
$(function() { // DOM ready
//Hover shows submenu
$('nav ul li a:not(:only-child)').hover(function(e) {
$(this).children('.nav-dropdown').toggle();
// Close one dropdown when selecting another
});
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
$('.nav-dropdown li a').on("click", function(){
$('#nav-toggle').slideUp();
});
}); // end DOM ready
})(jQuery); // end jQuery
I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).
There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
$('.ul-color li').on('click',function(){
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');
});
});
.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
Before any click :
pic-1
After i clicked on 'choose a color' :
pic-2
if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too:
pic-3
so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen
pic-4
Try this,
HTML
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li class="color">color1</li>
<li class="color">color2</li>
<li class="color">color3</li>
<li class="color">color4</li>
<li class="color">color5</li>
</ul>
</div>
</div>
CSS
.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}
Javascript
$('#slect-color').on('click',function(){
$('ul li').show();
});
$('.color').on('click',function(){
$('.color').hide();
$(this).css('display','block');
});
This is a bit too complex to handle everything with display: block and display: none. I slightly changed your code to add a few classes:
ul.initial is you initial state, where "Choose a color" is visible
ul.opened is when all colors are shown, for one to be picked
li.selected is the color you've picked
What you want is that any li shows up if:
We're in the initial state, and the li is the "Choose a color" one
We've opened the list, and the li is NOT the "Choose a color" one
The li is the one selected
Here's the CSS part that is interesting for you:
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
And below, a working snippet based on your code, with my improvements:
$('.ul-color li').on('click',function() {
var list = $('.ul-color');
if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}
list.toggleClass('opened');
list.removeClass('initial');
});
.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;
}
.color-select ul li {
margin-right: 10px;
padding: 10px;
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">
<li id="select-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
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'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.)).