jsFiddle link for running demo: http://jsfiddle.net/dahAG/
In order to make this hover menu compatible on touch devices, it needs to have a function that collapses the menu after it has been pressed open on a touch device by allowing the user (on the touch device) to press anywhere on the screen outside of the menu. Currently, on touch devices, the only way to collapse the menu after it has been opened is to press on the menu again. What is the best way to accomplish this?
This hover menu simply uses CSS3 transition effects, no JavaScript—but I am more than happy to integrate some if that's the preferred method.
HTML
<section onclick="">
<nav class="menu left" aria-haspopup="true" aria-controls="p1"><img src="images/submenu.gif" alt="">
<ul id="p1">
<li class="current">Products<b></b></li>
<li aria-haspopup="false">Services<b></b></li>
<li aria-haspopup="false">Demonstrations<b></b></li>
<li aria-haspopup="false">Menus<b></b></li>
<li aria-haspopup="false">Layouts<b></b></li>
<li aria-haspopup="false">Contact<b></b></li>
<li class="last" aria-haspopup="false">Privacy<b></b></li>
</ul>
</nav>
</section>
CSS
#media only screen and (max-width:880px) {
.menu {
width:200px;
}
.menu.center {
margin:0 auto;
text-align:left;
}
.menu.right {
margin:0 0 0 auto;
text-align:left;
}
.menu img {
display:block;
}
.menu ul li {
display:block;
margin-bottom:-40px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.menu ul li:last-child {
margin-bottom:0;
}
.menu ul li.current {
display:block;
z-index:10;
}
.menu:hover ul li {
margin-bottom:0;
}
}
Related
I am trying to make a responsive menu bar and when the width is under 550px for example, the menu items overlay with the divs that are following next. What am I doing wrong?
In the CSS I tried to make the list position relative, but the same result.
HTML Code:
<div id="navbar">
<h2>Aripile Zarandului</h2>
<ul id="ulNav">
<li class="current">Acasă</li>
<li>Despre noi</li>
<li>Fotografii</li>
<li>Login</li>
<li>Contactează-ne</li>
</ul>
</div>
CSS Code:
#ulNav li{
list-style-type:none;
display:inline;
padding-left:10px;
padding-right:10px;
line-height:3em;
display:inline-block;
}
#ulNav li:hover{
background-color:#2980b9;
}
#ulNav li a{
text-decoration:none;
color:white;
font-size:1em;
display:block;
}
/* Responsiveness */
#media screen and (max-width: 650px) {
#ulNav li {
display:block;
text-align:center;
position:relative;
}
#ulNav{
float:none;
}
}
Screenshot
The thing that's causing the problem is that when I make the size of the window smaller (restore down), the 4th sub div of class=Menu is not behaving like the other 3 divs, which I gave 25% width each. Instead, it is overflowing horizontally and going past the body, header and footer.
/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width:25%;
}
.Menu li {
width: 14.84em;
}
.Menu li ul { /*Hides dropdown*/
position: absolute;
left: -999em;
}
.Menu li:hover ul { /*Makes the dropdown show on hover*/
left: auto;
}
.Menu a { /*Styles the links on menubar */
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover { /*background color of links change on
hover*/
background-color: #dcefdc;
}
.Menu div a{
padding-top:11px;
}
.Menu div a:hover{
height:50px;
}
.liwidth{
float:left;
background-color:#4CAF50 ;
height:50px;
}
/*----------Dropdown ends-----------*/
<div id="DivMenu">
<div class="Menu"><a style="text-decoration:none;" href="index.html">HomePage</a></div>
<div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>
<div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey </a></div>
<div class="Menu">
<li>
Login/Register
<ul>
<div>
<li class="liwidth">
<a class="linkvalign" href="Login.html">Login</a>
</li>
<li class="liwidth" >
<a class="linkvalign" href="Register.html">Register</a>
</li>
</div>
</ul>
</li>
</div>
</div>
I can see that the thing causing the problem is the <li>'s in the 4th div, but I can't figure out how to arrange it so that it doesn't overflow.
I've tried removing the <li> tags altogether but that just causes more issues.
I'm not completely sure I understand what you're trying to do, and therefore what the proper solution should be, but adding overflow: hidden to .Main will prevent its content from overflowing at least.
I am trying to make a navigation bar with drop down menus. I've created the navigation bar and used bootstraps "pull-left" class to move it to the left. But the dropdown menu I have created using jQuery is now also moved the left since the HTML code is contained in the div marked as "pull-left" I have googled and tried out stuff for a few hours, but I couldn't quite find a solution.
The HTML for the Navigation bar
<div id = "nav">
<div class = "container" >
<div class = "pull-left ">
<img class = "logo-image" src = "Logo2.png" />
</div>
<ul class = "pull-left">
<li class "logo">Home</li>
<li>About</li>
<li>
Projects
<ul>
<li>Stealth Game </li>
</ul>
</li>
<li>Gallery</li>
<li>Tutorials</li>
</ul>
<ul class = "pull-right">
<li> Follow me</li>
</ul>
</div>
The CSS
#nav li{
display:inline;
padding-right : 5px;
}
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
#nav li li {
float: auto;
}
#nav li a {
width:150px;
display: inline-block;
text-align:center;
color:#000;
margin-right:5px;
height:35px;
line-height:35px;
text-decoration:none;
font-size:80%;
border:1px solid #ccc;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
}
#nav li li a {
background:#EBE7E6!important;
text-align:left;
height:auto;
line-height:1;
width:150px;
padding:8px 20px 8px 22px;
border:1px solid #D0D0D0;
border-top:none;
margin-right:0;
}
And the JavaScript
$(document).ready(function() {
$("#nav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").hide();
});
});
So the actual problem is, that the submenu, that is appearing doesn't appear under the menu it is opened from, but is also pulled to the left since I used this bootstrap class to move my navigation bar to the left.
Two things resolve this:
#nav li {
display:inline-block;
...
}
#nav ul ul {
position:absolute;
...
}
Demo
You have:
#nav ul ul {
display:none;
position:fixed;
z-index:999;
}
The position:fixed on the submenu is probably what is giving you positioning problems.
edit:
you want to use position: absolute instead.
another edit, set position: relative on the parent LI, you will also need to set the display to block and because they are no longer inline elements you will want to float them left:
#nav li{
position: relative;
display: block;
float: left;
padding-right: 5px;
}
Fiddle with this working: https://jsfiddle.net/DTcHh/
I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
I created a CSS menu which has menu items and submenu items. These submenu items are actually big divs which gets shown when the user hovers the menu item.
They work pretty well but I have one problem:
If the submenu is wider than the whole menu, it overflows and may break the pages width in the worst case.
When the submenu reaches the right side of the menu, it should "stick" at right:0px.
Is there any possibility to limit the position of an element to it's grandparental's width? Resp. is there a way to achieve my goal in pure CSS? I don't really want to use JavaScript for that.
This is the HTML structure and an excerpt of the important CSS:
.navi {
height:60px;
width:350px;
position:relative;
background-color:#DEDEDE;
}
.navi ul {
list-style:none;
display:inline-block;
margin-left:50px;
}
.navi ul li {
float:left;
height:60px;
cursor:pointer;
position:relative;
}
.navi ul li a {
height:100%;
line-height:60px;
display:inline-block;
}
.navi ul li:hover .submenu {
display:block;
}
.navi ul li .submenu {
width:200px;
height:100px;
display:none;
position:absolute;
background-color:#F3F3F3;
}
<div class="navi">
<ul>
<li>
<a>a navigation link</a>
</li>
<li>
<a>a navigation link</a>
<div class="submenu">
<!-- content -->
</div>
<div class="arrow"></div>
</li>
<div class="clearfix"></div>
</ul>
</div>
Here is a fiddle showing my menu.