I have the following menu which works perfectly on desktop. When hover on item, secondary menu appears.
On tablet/mobile device this is a click/touch
I want the menu hover effect (touch on tablet) to disappear when clicked away from on a tablet/mobile device.
E.g. ipad, when click on My Lists, secondary menu shows, but need it to disappear when clicked away from menu
Is this possible?
CSS:
* {outline:none; border:none; margin:0; padding:0; font:14px arial,sans-serif;}
body {background: url(images/bg.gif) repeat;}
#top {background: url(images/top_tile.png) repeat-x; height:140px; width:100%;}
.wrap {width:980px; margin:0 auto;}
#top1 {height:60px;}
.logo {padding-top:10px;}
#menu {height:48px;}
/*NAV*/
#nav{
list-style:none;
font-weight:bold;
/* Clear floats */
float:left;
width:100%;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:20px 25px 7px 15px;
color:#333;
height:25px;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#ff9900;
text-decoration:none;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
min-width:200px;
border-radius:0px 0px 3px 3px;
border:1px solid #ccc;
}
#nav ul li{
padding-top:1px;
float:none;
background:#fff;
}
#nav ul a{
white-space:nowrap;
font-size:13px;
color:#666;
padding: 10px 0px 5px 15px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#ff9900;
text-decoration:none;
}
#nav li:hover ul a{
text-decoration:none;
background:#fff;
}
#nav li:hover ul li a:hover{
background:#ff9900;
color:#fff;
}
HTML:
<body>
<div id="top">
<div id="top1" class="wrap"><img src="images/logo.gif" class="logo" /></div>
<div id="menu" class="wrap">
<ul id="nav">
<li>My Lists
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>View all Lists</li>
</ul>
</li>
<li>Following
<ul>
<li>Follow 1</li>
<li>Follow 2</li>
<li>Follow 3</li>
<li>View all Follows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Fiddle
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
---As mentioned here. jQuery hide element when clicked anywhere on the page
Related
I've some troubles with the navigation bar from my website. The position of the navigation bar changes when the dropdown menu becomes visible.
Also when resizing the browser the navigation bar change.
This is ofcource not really my intention. So please can someone help me?
I would appreciated very much.
This is my css code I'm using.
/*main menu*/
.nav-top {list-style:none;
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
position: relative; display:none; }
ul.nav-top li { display:inline-block;
padding:40px;
margin-right:19px;
position:relative;
}
ul.nav-top li:hover> ul { display:block; }
ul.nav-top li a { display:block;
text-decoration:none;
border-bottom: 2px solid transparent;
}
ul.nav-top a:hover{ color:#686A6A;
border-bottom:2px solid #E4E4E4;
}
/*sub menu*/
ul.nav-top ul ul { clear:both;
border: solid 1px ffffff; }
ul.nav-top li li {
display:block;
/* Introducing a padding between the li and the a give the illusion spaced items */
padding:2px; padding-top:10px;
}
ul.nav-top ul ul li {
}
ul.nav-top ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
ul.nav-top ul ul li:hover a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none; background:#FFF;
}
ul.nav-top ul ul li:hover a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
color:#686A6A; border-bottom:2px solid #E4E4E4;
}
thanks for your answer.
This is my HTML:
</head>
<body>
<div id="header">
<img src="images/logo-marco-kaller.png">
<ul class="nav-top">
<li>home</li>
<li>about</li>
<li>work
<ul>
<li>design</li>
<li>paintings</li>
<li>sculptures</li>
</ul>
<li>shop</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
<div id="background"></div>
<div class="wrapper">
<div id="content-background"><br>
<h1>Marco Kaller</h1>
<p>Welkom op de site van Marco Kaller!</p>
<div id="content">
</div>
</div>
</div>
<div id="footer">
<img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" />
<ul class="talen">
<li>language:</li>
<li>en</li>
<li>nl</li>
<li>de</li>
</ul>
<hr class="faded" />
</div>
I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
I have the menu bar below and i would like to change the css class to active of the html code when the pages has been selected. So when the user has selected to view said page i would like to set the active class which is already set
HTML Code
<div id="main-nav">
<ul>
<li class="active">Home</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="clear-both"> </div>
</div>
CSS code
#main-nav{
height:29px;
float:left;
background-image:url(../Styles/images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(../Styles/images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(../Styles/images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li.active a,
#main-nav li a:hover{
background-image:url(../Styles/images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
The key to making list-based menus:
DO NOT STYLE THE LIST (other than display, position and float and clearing margins and padding)
Use display:block and put ALL STYLING on the A-tag (this includes your hover and active states).
Also, choose display:inline-block, or float:left, not both.
I trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/
it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/
I have a horizontal menu coded in html and css only, this menu has sub-menu and some sub-menu has sub-menu of their own.
It works fine with the first level sub-menu only, but when I insert some sub-menu for any individual sub-menu, they still show up. But I can not reach to click them, they vanishes as my cursor moves. A demo can be found here : http://example.bojroninad.net/pages/menu_demo1.html
However, I was able to watch some steady behavior of this menu sometimes, but most of the time they vanishes before I reach to them.
Here is my html code(pardon me for bad structured code):
`<html>
<link rel="stylesheet" href="menu1_css.css" media="screen" type="text/css">
<div id="menu1">
<ul>
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Team</li>
<li>Offices</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design </li>
<li>Internet Marketing</li>
<li>Hosting </li>
<li>Domain Names
<ul>
<li>.ORG</li>
<li>.COM</li>
<li>.NET</li>
</ul>
</li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France </li>
<li>USA </li>
<li>Australia </li>
</ul>
</li>
</ul>
</div>
</html>`
and my css code goes here:
#menu1 {
background-color:#ccc;
width:100%;
height:30px;
}
#menu1 ul{
padding:0px;
margin:0px;
}
#menu1 ul li
{
list-style:none;
display:inline;
margin-left:10px;
float:left;
height:30px;
position:relative;
}
#menu1 ul li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:green;
}
#menu1 li a:hover{
text-decoration:underline;
}
#menu1 li ul {
display:none;
margin:0px;
padding:0px;
position:absolute;
left:0px;
top:20px;
width:120px;
background-color:#999;
}
#menu1 li:hover ul{
display:block;
width:160px;
}
#menu1 li li {
display:list-item;
list-style:none;
}
/* second level sub menu */
#menu1 li li ul {
padding:0px;
margin-left:150px;
background-color:white;
top:0px;
position:relative;
}
#menu1 li li li{
display:none;
list-style:none;
position:absolute;
width:120px;
background-color:red;
}
#menu1 li li:hover li{
display:block;
width:100px;
position:relative;
margin-left:0px;
float:left;
height:30px;
}
#menu1 ul li li li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:yellow;
}
#menu1 li li li a:hover{
text-decoration:underline;
}
The problem is that your second and third level list elements are also floated left, making them smaller than the menu itself.
You can solve it by setting:
#menu1 li li {
float: none; /* line 50 */
}
#menu1 li li ul {
position: absolute; /* line 57, is now relative, to avoid growth of li li */
}
As far as I can see, the menu works fine - except that the second-level menu is positioned a bit too low
Usability would also be much better if you changed background color on li:hover + cursor:pointer - so you can see which button in the menu is active (and the user gets a visual feedback when he hovers out).