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.
Related
When I remove the margin-left, margin and padding value to 0px from the root ul tag then
all menu display in the left side and the dropdown-menu size match
I want to move all menus plus dropdown-menu to right. I moved the menu to the right using margin-left, margin: 15px, and padding 15px in the root ul tag and it works but the drop-menu size isn't matching, please look up the picture.
[output of this page] [1]: https://i.stack.imgur.com/jLZnO.png
[expect output] [2]: https://i.stack.imgur.com/wvOLY.png
ul {
margin: 15px;
padding: 15px;
list-style: none;
margin-left: 50%;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
You just need to add float:right in the css, in the ul part. Also remove the margin-left: 65%; because it will make your design unresponsive since your buttons have fixed width.
ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
try like this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> sport </title>
<link rel="stylesheet" href="sport.css">
</head>
<body>
<ul class="menu">
<li > <a>sport</a>
<ul>
<li >football </li>
<li >soccer </li>
<li >basketbal</li>
</ul>
</li>
<li > <a>more info</a>
<ul>
<li ># </li>
<li > # </li>
<li >#</li>
</ul>
</li>
</ul>
</body>
</html>
css
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
position: relative;
}
ul li ul{
display:none;
position:absolute;
right:-200px;
top:0;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li:hover ul{
display: block;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
float:right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<html>
<head>
<style>
</style>
</head>
<body>
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
</body>
</html>
add in ul style
ul{
float: right;
}
Try this Example
Html
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
Css
ul.menu {
width: 200px;
}
ul.menu>li{
position:relative;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: right;
width: 100%;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position:absolute;
left: 200px;
top: 0px;
width:200px;
}
Use this CSS:
ul.menu{
margin: 0px;
padding: 0px;
list-style: none;
margin-left:65%;
}
ul.menu li{
float: left;
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
li {
position: relative;
}
li ul {
position: absolute;
left: 0;
margin: 0;
padding: 0;
display: block;
width: inherit;
}
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'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.
I got this code from JavaScript Kit and it's not working properly... Their site isn't very active so I posted here instead. The list is displaying correctly, however, if I hover over the menu(main menu, submenus, etc) and then hover out, the entire menu disappears. When you hover back over the main menu, it reappears. The rest of the submenus appear correctly. Any ideas?
JS:
var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Rosters
<ul>
<li>Counter-Strike: Source</li>
<li>Team Fortress 2</li>
<li>Black Ops 2</li>
<li>Complete Roster</li>
</ul></li>
<li>Matches
<ul>
<li>Schedule</li>
<li>Results</li>
</ul></li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
#navigation {
background: url(images/navigation_bg.gif) repeat-x;
border-top: #666666;
border-bottom: #333333;
height: 59px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 59px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 100;
}
#navigation ul li {
position: relative;
display: inline-block;
float: left;
}
#navigation ul li a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li.last a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left, url(images/navigation_item_bg.gif) repeat-y right;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li ul {
top: 0;
left: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
zIndex: 100;
}
#navigation ul li ul li {
display: inline;
float: none;
margin: 0px;
padding: 0px;
}
#navigation ul li ul li a {
width: 175px;
font-weight: bold;
text-decoration: none;
background: #000;
border-width: 0px 1px;
padding: 0px 5px;
display: block;
}
#navigation ul li ul li a:hover {
background: #333333;
}
That script needs to exclude the topmost div and ul of the menu from hiding:
if (this !== ultags[0].parentNode) {
this.style.zIndex = 0;
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.zIndex = 100;
}
jsfiddle