Currently developing a website that contains a drop down navigation menu with jQuery. However I'm having an issue where the drop down isn't displaying on top of the other elements when I hover over the parent link... I think it's pretty obvious that it's a z-index issue but I have been stumped for a while now so any help would be appreciated.
HTML
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Parent 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</div>
CSS
.navigation {
position:relative;
background-color:#4F4F4F;
width:100%;
min-width:910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index:10;
overflow-y:hidden;
overflow-x:auto;
height:auto;
}
.navigation ul {
margin:0;
padding:0;
list-type:none;
text-align:center;
position:relative;
}
.navigation ul li {
display:inline-block;
padding-left: 52px;
position:relative;
z-index:11;
}
.navigation ul li a {
display:block;
height:29px;
color:#fff;
text-decoration:none;
font-family: cabinmedium;
font-size:13px;
padding-top:18px;
position:relative;
z-index:11;
}
.navigation ul ul {
position:absolute;
width:auto;
display:none;
box-shadow: 0px 1px 1px #999;
margin-left:-10px;
background-color:#89c63b;
text-align:left;
padding-left:10px;
padding-right:10px;
z-index:11;
}
.navigation ul ul li {
display:block;
background-color:#89c63b;
padding:0;
width:auto;
min-width: 100px;
position:relative;
z-index:11;
}
jQuery
$(document).ready(function() {
$(".navigation ul li").hover(function() {
$(this).find("ul").stop().fadeToggle(400);
})
});
NOTE: I included the jQuery just incase but I have tested and it does infact fade in/out the navigation elements as it needs to.
Any ideas anybody?
'navigation' class will be as like below code without 'overflow-y', 'overflow-x'
.navigation {
position: relative;
background-color: #4F4F4F;
width: 100%;
min-width: 910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index: 10;
/* overflow-y: hidden; */
/* overflow-x: auto; */
height: auto;
}
demo
Related
Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!
I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/
I have a mobile site I'm working on. I finally got the JS code to work for showing submenu on click rather than hover. Now I'm having trouble positioning the submenu directly under the main menu. I researched the best i can, found that i need to make the main menu position "relative" and submenu "absolute". I've been going in circles trying to figure apply that, but no luck. The code is a bit messy so pardon me. I'm just a noob.
HTML
<html>
<head>
<link rel="stylesheet" href="phone.css">
</head>
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>Menu
</div>
<div id="hiddenMenu" class="smenu_div" style="display: none;">
<ul>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</div>
</li>
</ul>
<br>
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
</body></html>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
float:right;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#000000;
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
.smenu_div li ul
{
position:absolute;
float:right;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
Try changing your HTML so that you dont have a div ending in the middle of the first li.
Then if you put an ID directly onto the hidden menu, you can use the javascript to directly hide / show the hidden menu
http://jsbin.com/fexazihe/1/edit?html,css,js,output
HTML
<body>
<img class="smlogo" alt="" src="clearlogo123.png">
<div id="menuclick" class="smenu_div">
<ul>
<li>
Menu
<ul id='hiddenMenu'>
<li>1Submenu</li>
<li>2Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
.smenu_div ul
{
padding:0px;
margin-top:35px;
margin-right:40px;
font-family:georgia;
font-size:60px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:35%;
overflow:hidden;
position: relative;
display: block;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
border-bottom:1px solid #333;
margin-top: 10px;
z-index: 50;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
display: none;
position: relative;
width: 100%;
background: transparent;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
.smenu_div ul li a:hover
{
color:#000000;
background:#fdff30;
}
.smenu_div ul li#active
{
position:relative;
color:#000000;
background:#fdff30;
}
JS
<script>
var hidden = true;
document.getElementById('menuclick').onclick = function () {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
hidden = !hidden;
};
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to make a responsive menu looks like following in my website.
I've already made my website responsive with CSS media queries. I want to add this kind of menu when the max-width : 479px .
This is my Project: Link to project
You can try to do something like this.For me it looks like drop down menu. It is just an suggestion
Fiddle LINK
<div class="dd_menu_wrapper">
<!-- MENU -->
<label for="dd-0" class="dd_label">Navigation</label>
<input type="checkbox" class="dd_toggle" id="dd-0">
<ul class="dd_menu">
<li>Home
</li>
<li class="dd_parent">
<label for="dd-1">Products</label>
<input type="checkbox" class="dd_trigger" id="dd-1">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li class="dd_parent">
<label for="dd-2">Resources</label>
<input type="checkbox" class="dd_trigger" id="dd-2">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>This is samplek
</li>
</ul>
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Resources
</li>
</ul>
</div>
CSS
/* _______________________________________________
01 MENU BAR
_______________________________________________ */
.dd_menu_wrapper {
width: 479px;
margin:0 auto;
position: relative;
z-index:9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:1px;
}
.dd_menu_wrapper a, .dd_menu_wrapper label {
color: #FFF;
text-decoration: none;
cursor: pointer;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu_wrapper a:hover,
.dd_menu_wrapper label:hover,
.dd_parent:hover label {
color:#000;
background-color:#eff0f1;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
background: #565a5c;
}
.dd_menu:before, .dd_menu:after {
content:" ";
display: table;
}
.dd_menu:after {
clear: both;
}
.dd_menu li {
position: relative;
}
.dd_menu > li {
float: left;
font-weight:bold;
}
.dd_menu li a {
padding: 10px 15px;
display: block;
}
.dd_menu > li:hover {
background-color: #eff0f1;
color:#000;
}
.dd_menu li.dd_parent {
}
.dd_menu li.dd_parent ul li a {
color:#000;
text-decoration:none;
font-size:13px;
}
.dd_menu li.dd_parent ul li a:hover {
color:#000;
text-decoration:underline;
}
.dd_menu li.dd_parent > label {
display: block;
padding: 10px 15px;
background-repeat: no-repeat;
}
.dd_menu li.dd_parent > label a:hover {
color:#000000;
}
.dd_menu li.dd_parent > label a:active {
color:#000000;
}
.dd_menu li.dd_parent > label a:focus {
color:#000000;
}
.dd_menu li.dd_parent > label a:visited {
color:#000000;
}
.dd_menu li.dd_parent > label a {
color:#000000;
}
/* _______________________________________________
02 DROP DOWNS
_______________________________________________ */
.dd_menu ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 41px;
left: -999em;
min-width: 170px;
background: #eff0f1;
color:#000;
}
.dd_menu .dd_trigger {
display: block;
position: absolute;
cursor: pointer;
width: 100%;
margin: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* _______________________________________________
03 DESKTOP VERSION
_______________________________________________ */
#media screen and (min-width: 768px) {
.dd_menu > li:hover > ul {
left:auto;
}
.dd_toggle, .dd_label {
display: none;
}
}
/* _______________________________________________
04 MOBILE VERSION
_______________________________________________ */
#media screen and (max-width: 767px) {
.dd_label {
display: block;
padding: 10px 15px;
cursor: pointer;
color:#ffffff;
background: #565a5c;
}
.dd_label:after {
width: 24px;
height: 24px;
content: url("../images/toggle.png");
float: right;
}
.dd_toggle, .dd_toggle:checked {
width: 100%;
display: block;
position: absolute;
cursor: pointer;
height: 40px;
margin: 0;
opacity: 0;
}
.dd_menu {
position: absolute;
background: #565a5c;
opacity:0;
visibility:hidden;
}
.dd_menu > li {
padding-right: 0;
float: none;
}
.dd_menu > li:hover {
background-color: transparent;
}
.dd_menu li ul {
display: block;
width: 100%;
top:auto;
left:auto;
width:auto;
z-index: 999;
visibility: visible;
margin-left: 0;
padding-left:12px;
background: none;
}
.dd_toggle:checked + .dd_menu {
opacity:1;
visibility:visible;
}
.dd_menu .dd_trigger + ul {
max-height:0;
opacity:0;
visibility:hidden;
}
.dd_menu .dd_trigger:checked + ul {
position: static;
max-height:999px;
opacity:1;
visibility:visible;
z-index: 999;
background-color:#eff0f1;
}
}
In smaller screen hide your menu with css .
.menu { display:none; }
make one button whos hide on larger screen and visible in smaller screen with help of media queries , then you can add java script like this
$(document).ready(function (){
$("#buttonId").click(function (){
$("#menu").slideToggle();
});
});
The image you included is probablly using Bootstrap Framework to achieve the responsiveness.
You can have a look at it here.
You will have to write CSS media queries to achieve that. You can refer to this tutorial to find how can you make a responsive navbar.
Demo
css
html,body {
margin:0;
padding:0;
}
header {
background-color:black;
overflow:hidden;
padding:2%;
}
#logo {
float:left;
width:calc(100% - 50px);
max-width:280px;
height:40px;
background-image:url('https://lh4.googleusercontent.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAA-Wk/mVaqfjXjn4k/s46-c-k-no/photo.jpg'); /* your logo here! */
background-repeat:no-repeat;
/*background-size:100%;*/
}
nav {
float:right;
padding-top:10px;
}
.navitem {
color:#999;
font-family:Helvetica;
font-size:16px;
margin-left:5px;
text-decoration:none;
font-weight:bold;
padding:8px;
}
.navitem:first-child {
margin-left:0px;
}
.navitem:hover {
color:white;
}
#smartbutton {
float:right;
width:20px;
height:15px;
cursor:pointer;
padding:7px;
border:1px solid #999;
border-radius:6px;
margin-top:5px;
display:none;
}
.buttonline {
background-color:#999;
height:3px;
margin-top:4px;
}
.buttonline:first-child {
margin-top:0px;
}
/* standard menu */
#media only screen and (min-width:480px)
{
#smartbutton {
display:none;
}
nav {
display:inline-block !important;
}
}
/* smart menu */
#media only screen and (max-width:479px)
{
#smartbutton {
display:inline-block;
}
nav {
display:none;
width:100%;
position:relative;
top:5px;
}
.navitem {
border-top:1px solid #999;
display:block;
margin:0px;
}
.navitem:hover {
background-color:#333;
}
}
HTML
<header>
<a id="logo" href="#"></a>
<nav>
Link1
Link2
Link3
</nav>
</header>
jquery
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
// add click listener
$('#smartbutton').click(function(event)
{
$('nav').animate({height:'toggle'},200);
});
I thinks its better to use Frameworks like Twitter Bootstrap or Foundation but as I've seen you example above I think it is Twitter Bootstrap. It is simple to use the frameworks.
Here is tutorials of Twitter Bootstrap. I give you the navbar link for you to see the example.
http://getbootstrap.com/components/#navbar
See the examples there.. just make you browser smaller for you to see how it is responsive..
I hope it will help you.
Why don't you use a framework? Here for example .
They have a component which is pretty much what you want.
And here you will find an article on how to style it to your liking.
Whats the best way to achieve that kinda of 'onmouseover options menu to the right' that exists on the each feed of Google Reader or in Gmail->Inbox, Sent, etc?
Self coded javascript + CSS? Or can jQuery achieve it more easily?
EXAMPLE DEMO
I don't know how much experience you have with jQuery... Here is the code I used in the demo:
$('#nav li').hover(function(){
$('#description').hide();
$('span', this).stop(1).fadeTo(300,1);
},function(){
$('span', this).stop(1).fadeTo(300,0);
});
$('#nav span').click(function(){
var spanPosT = $(this).offset().top;
var spanPosL = $(this).offset().left;
$('#description').css({left:(spanPosL+24)+'px',top:spanPosT+'px'}).fadeTo(300,1);
});
$('#description').mouseout(function(){
$(this).hide();
});
HTML:
<div id="description"></div>
<div id="nav">
<ul>
<li>Option 1<span>+</span></li>
<li>Something 2<span>+</span></li>
<li>Else 3<span>+</span></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
#nav li{
position:relative;
width:120px;
background:#f3f3f3;
margin:3px 0;
padding:2px 10px;
color:#666;
text-shadow:0px 1px 0px #fff;
cursor:pointer;
}
#nav li:hover{
background:#eee;
}
#nav li span{
display:none;
border-left:1px solid #bbb;
position:absolute;
right:0px;
padding:0 6px;
color:#777;
}
#nav li span:hover{
background:#fff;
color:#444;
}
#description{
display:none;
position:absolute;
z-index:2;
background:#eee;
border:1px solid #777;
width:250px;
height:120px;
padding:15px;
}
If you don't know how to populate the area on-click with the adequate content... let me know
$('element').hover(function(){
//code
});
Or
$('element').on('hover', function(){
//code
});
Do you mean that the background-color changes when a mouse is over the menu?
Then you can use CSS
eg
a:hover {
background-color: #ccc;
}
https://developer.mozilla.org/en/CSS/%3Ahover
Here is Example
HTML:
<div id="hoverable"><span id="arrow"></span>Hoverable
<ul id="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
CSS:
#hoverable
{
text-align: left;
padding:5px;
background:#eee;
border:1px solid #ddd;
width:120px;
height:30px;
position:relative;
line-height:28px;
}
#options
{
position:absolute;
display:none;
list-style:none;
background:#ddd;
width:100px;
display:none;
margin:0;
padding-left:15px;
border:1px solid #333;
color: #000;
}
#options li
{
padding: 5px 0 5px 5px
}
#arrow
{
width:15px;
height:15px;
border-radius: 3px;
background:#fff;
float:right;
margin-right:8px;
margin-top:8px;
display:none
}
jQuery:
$(function() {
$("#hoverable").on('mouseenter',
function(e) {
$(this).css({
background: '#000',
opacity: 0.8,
color: '#fff'
}).find('#arrow').show().css({
display: 'block'
});
}).on('mouseout',
function(e) {
if ($('#arrow').is(':visible') && !$('#options').is(':visible')) $('#arrow:visible').hide();
$(this).css({
background: '#eee',
opacity: 1,
color: '#000'
});
});
$('#arrow').on('click',
function() {
if ($('#options', $(this).parent()).is(':visible')) {
$('#options').hide();
} else {
$(this).parent().find('#options').show().css({
top: $(this).parent().height() + 'px',
left: $(this).position().left + 'px'
});
}
}).on('mouseenter',
function() {
$(this).show().parent().css({
background: '#000',
opacity: 0.8,
color: '#fff'
});
});
});
I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed.
What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.
Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.
Here is the css:
#navbar ul{
margin:10;
padding:0;
width:1000px;
}
#navbar li{
float:left;
color:#191919;
list-style-type:none;
text-transform:uppercase;
background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
padding:10px 0;
}
#navbar li.last{
background:none;
}
#navbar ul li a{
padding: 12px 33px;
color: #fff;
text-decoration: none;
}
#navbar ul li a:hover{
color:#05af0d;
background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
}
#navbar ul li a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow.png);
}
#navbar ul li:hover a.hover-arrow:after{
margin-left:10px;
content:url(../images/common/nav-arrow-roll.png);
}
#navbar ul li a.hover-arrow:hover{
background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat;
}
#navbar ul li p{
margin:0;
display:inline-block;
}
/*Sub Nav Lists */
.subnav {
display:none;
visibility:hidden;
}
#navbar ul li ul{
margin:0; padding:0;
position: absolute;
left: auto; top: 40px;
background: #333;
z-index: 99;
}
#navbar ul li ul li{
background:none;
}
#navbar ul li ul li a{
padding:0px 3px;
display:inline-block;
margin:0;
width:150px;
text-transform:capitalize;
}
#navbar ul li ul li a:hover{
background-color:#a7a7a7;
color:#000;
border:none;
background-image:none;
font-weight:bold;
}
Here is how it's going on the page:
<div id="navbar">
<ul class="topnav">
<li id="item 1"><p></p>
<ul class="subnav"></subnav>
</li>
<li id="item 2"><p></p>
<ul class="subnav"></subnav>
</li>
etc...
</ul>
</div>
Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:
<ul class="subnav"></ul>
Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)