I'm having trouble when displaying a dropdown menu.
fiddler: http://jsfiddle.net/GxrSk/
The Simple HTML code:
<nav>
<ul id="top-menu">
<li class="parent">
MENU ITEM
<ul class="sub-menu">
<li>ITEM 1</li>
<li>ITEM 2</li>
</ul>
</li>
</ul>
</nav>
The CSS:
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
nav { margin-top: 28px; }
#top-menu li { position: relative; }
#top-menu > li { display: inline-block; margin-left: 40px; }
#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; }
ul.sub-menu { display: none; top: 26px; position: absolute; min-width: 137px; z-index: 9999; }
ul.sub-menu > li > a { text-align: center; display: block; }
#top-menu li:hover > ul.sub-menu { display: block; }
Look, the problem is that sometimes I can navigate the menu and some times when I try to enter it, the menu has hidden.
If someone can't understand, post in the comments below.
Change top to padding top.
padding-top: 20px;
try to make ul.sub-menu { top:20px; }
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
nav { margin-top: 28px; }
#top-menu li { position: relative; }
#top-menu > li { display: inline-block; margin-left: 40px; }
#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; }
ul.sub-menu { display: none; top: 20px; position: absolute; min-width: 137px; z-index: 9999; }
ul.sub-menu > li > a { text-align: center; display: block; }
#top-menu li:hover > ul.sub-menu { display: block; }
keep decreasing the top-value in ul.sub-menu until it works.
Related
I have a menubar on top of my page which show sub-menus when clicked and I want to make disappear the sub-menu on click of anywhere in the page. So far i did code to display sub-menu on click of my menu. Below is the code for the same!
Can somebody help me with the existing code to close sub-menu part on click of anywhere in the page?
Many thanks in advance!
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
$(this).find('ul.submenu').css('transition', '1s');
//$(this).find('div.divsubsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open);
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
width: 800px;
height: 30px;
background-color: #191919;
margin-top: 10px;
position: relative;
font-size: 12px;
font-family: Verdana;
margin: auto;
text-align: center;
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a.MenuLink {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
border: double #161718;
border-width: 1.3px;
border-top: none;
border-bottom: none;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
background-color: black;
text-decoration: none;
transition: 0.3s;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
font-size: 15px;
font-weight: bold;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
width: 800px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: block;
color: #00537F;
font-weight: bold;
padding: 4px 8px;
}
#topnav ul.submenu>li:hover>a {
background-color: black;
color: white;
}
#topnav ul div {
visibility: hidden;
}
#topnav li:hover ul div.divsubsubmenu {
visibility: hidden;
}
#topnav li li:hover div.divsubsubmenu {
visibility: visible;
opacity: 1;
z-index: 1;
}
#topnav div.divsubsubmenu {
height: 50px;
background: black;
color: white;
float: left;
left: 0;
width: 800px;
position: absolute;
}
#topnav div.divsubsubmenu>ul>li:hover>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topnav">
<ul>
<li>
<a class="MenuLink" href="#">Admin</a>
</li>
<li>
<a class="MenuLink" href="#"> MAC </a>
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<div class="divsubsubmenu">
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</div>
</li>
<li>
Admin Data
</li>
</ul>
</li>
<li>
<a class="MenuLink" href="#">TPC </a>
<ul class="submenu">
<li>TPC1</li>
<li>TPC2</li>
</li>
</ul>
</div>
</body>
Just add this small code in your javascript:
$("body").on('click', function(e){
var element = e.target.tagName;
if(element !== 'A') {
$("#topnav ul li ul.submenu").css('display', 'none');
}
});
Hope this may help you.
I am trying a simple responsive menu with Css and jQuery. I want the jQuery script to work only on a certain window width. When I resize the browser. Here is my code.
$(document).ready(function(){
$(".resmenu").click(function(){
$(".menu").slideToggle();
});
$(".submenu").click(function(){
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
});
});
.container {
width:980px;
margin:100px auto 0 auto;
font-family:arial;
}
ul, li {
margin:0;
padding:0;
}
.resmenu {
display:none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top:28px;
display:none;
}
.menu li:hover ul {
display:block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size:14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display:none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background:#333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
It is working on 768px screen size, but when I click on the drop-down link instead of hover on more than 768 screen size, the drop down link is slide toggle. I need this script work on certain width only.
Use $(window).width() to get the width of the screen and use it in your condition:
if ($(window).width() < 768) {
// run your code here
}
See code snippet:
$(document).ready(function() {
$(".resmenu").click(function() {
$(".menu").slideToggle();
});
$(".submenu").click(function() {
if ($(window).width() < 768) {
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
}
});
});
.container {
width: 980px;
margin: 100px auto 0 auto;
font-family: arial;
}
ul,
li {
margin: 0;
padding: 0;
}
.resmenu {
display: none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top: 28px;
display: none;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (min-width:769px) {
.menu {
display: block!important;
}
}
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size: 14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display: none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background: #333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
In css change "container" width to 100%, and set max-width to 980px.
i want the menu to have the same effect as this menu from this page http://store.anumberofnames.org/ when someone clicks on the shop link the submenu to drop down and when they click on information the shop link to close and the information submenu to dropdown and also when they click on a category on the sebmenus i want the link that they selected to be highlighted, below is the html and css code i have
html
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>
</div>
css
#menu nav > ul > li > ul {
display: none;
text-align: right;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover{
color: #000;
}
That uses jQuery. You can do it using the two functions: slideDown() and slideUp(), or using a single function: slideToggle():
$(function() {
$("#menu nav > ul > li > ul").hide();
$("#menu nav > ul > li > a").click(function() {
if (!$(this).next("ul").is(":visible")) {
$("#menu nav > ul > li > ul").slideUp();
$(this).next("ul").slideDown();
}
return false;
});
});
#menu nav > ul > li > ul {
margin: 0;
margin-left: 25px;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
list-style-type: none;
text-decoration: none;
color: #ffffff;
line-height: 19px;
}
nav a {
color: rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family: arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover {
color: #000;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>
I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
I want to create a drop down menu like this website http://www.jamieoliver.com/ .
To see the drop down menu, just hover the navigation bar on this http://www.jamieoliver.com/ website
You should see this questions:
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click,
Anyway, you should have provided some code or some tries you have done before asking as #Chris Beckett said.
Here a quick example for you to have a look at. In the future please try and attempt to do this yourself before asking a question on here. That way least you've given it a go before someone has handed you it on a spoon.
HTML:
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial</li>
<li>Tutorial2</li>
<li>Tutorial3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
CSS:
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
left: 0;
width: 100%;
height: 400px;
background-color: grey;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
float: left;
width: 20%;
}
}
JSFIDDLE EXAMPLE