I have menu that contains 11 elements. 3 of it are displayed. There are buttons like a slider, that helps scrolling this menu. On my site i give special class to element, when its href == url of page(highlighting of current element). I need to move this current element in the first left position of menu on window load, so menu list must be scrolled, when page is loading, and current element stays in the first left place regardless position in list.
So that's my code:
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>
Please help me to supplement my code to solve the problem.
I try this
var curry = document.getElementsByClassName('active')[0];
$(window).load(function() {
curry.style.left = '0px';
});
But nothing happens.
You just need to do a loop of slideR until the first child has the active class by adding the firstLoad function, like in this updated snippet.
firstLoad();
function firstLoad() {
while(!$('#menu > ul > li').first().hasClass("active")) {
slideR();
}
}
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>
Related
I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
I'm using a list as a navigation and CSS to design a horizontal nav for the main pages/ vertical nav for the subpages of "Diet".
I apply JavaScript to hide/ show the subpage links in the navigation. It works, but when the page is loaded the 3 links are shown - after I hovered over the item "Diet" they are hidden. If I hover again, then it is shown again and works as it should.
Basically, how can I make sure that the three links are hidden from the beginning?
Thank you in advance!
$(document).ready(function() {
$("nav li:has(ul)").hover(function() {
$(this).find("ul").slideDown();
}, function() {
$(this).find("ul").hide();
});
});
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Just add a display: none to the submenu:
.navListElmnt > .navUnordList {
display:none;
}
If I can express a personal note, these class names are bad, difficult to remember and to write.
$(document).ready(
function()
{
$("nav li:has(ul)").hover(
function()
{
$(this).find("ul").slideDown();
}
,
function()
{
$(this).find("ul").hide();
});
}
);
.navUnordList{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
.navListElmnt{
float:left;
position:right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert{
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top:0.1em;
}
.navListElmnt > .navUnordList {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
To hide the options to start with you can set them as display: none in CSS.
Also note that the JS is redundant, as you can have the same logic in CSS, which is preferred as it's hardware accelerated. Try this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navUnordList li ul li {
display: none;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmnt:hover > ul > li {
display: block;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">
Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink</li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
You can actually have a CSS only solution for this. Keep height 0px by default and make it auto on hover like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
}
.navListElmnt:hover>.navUnordList {
height: auto;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Note: This does take away the slide down animation cos of height:auto
But you can have animated version too, if you are ready to measure how much height each submenu takes like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
transition: all 0.2s ease;
}
.navListElmnt:hover>.navUnordList {
height: 50px;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.
You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.
In below code the Purchase, sale, and new menus have some multilevel menus which need to open onClick using jQuery also when click on another menu the first one multilevel menu should be close and then this menu should be open with some transition effects.
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
$(this).next('li li').toggleClass('showingg');
});
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
}
#handle {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
-moz-transition: linear 0.4s;
}
li {
float: left;
}
li a {
text-decoration: none;
display: block;
padding: 15px;
background: #0C9;
color: #FFF;
border-bottom: 1px solid #ccc;
}
li a:hover {
background: #333;
}
li ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
#media screen and (max-width: 480px) {
#handle {
display: block;
background: #066;
color: #fff;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: xx-large;
cursor: pointer;
}
li {
width: 100%;
text-align: center;
font-size: x-large;
}
ul {
max-height: 0;
overflow: hidden;
}
li a:hover {
background: #0C9;
}
.showing {
max-height: 200em;
}
li:hover > ul {
position: relative;
}
/*li li {
display:none;
}*/
li li:hover > ul {
left: 0;
position: relative;
}
li li a {
background: #CCC;
}
.showingg {
display: block;
;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available stock
</li>
<li>
Purchase +
<ul>
<li>
Purchase Return +
<ul>
<li>Return1
</li>
</ul>
</li>
</ul>
</li>
<li>
Sale +
<ul>
<li>
Sale Return +
<ul>
<li>Return2
</li>
</ul>
</li>
</ul>
</li>
<li>Cash Recieve
</li>
<li>Cash Payment
</li>
<li>
New +
<ul>
<li>New Product
</li>
<li>New Supplier
</li>
<li>New Town
</li>
<li>New Customer
</li>
</ul>
</li>
<li>Opening Stock
</li>
<li>Gate Pass
</li>
<li>Sale History
</li>
</ul>
</nav>
</div>
</body>
</html>
I have a drop-down nav that I want to span the width of the browser (similar to what they have here: iwc), the problem I'm facing is that the parent nav has a fixed width of 960px so the drop down nav is restricted to that width.
Any help? Thanks.
JS
$(document).ready(function() {
$('li.nav').attr('class', 'shownav');//this removes the css class that is targetted by the rules so .js will now take over
$('.menu li.shownav').click(function() {
//will auto slide down content below it for it to fit
$('ul', this).slideToggle();
});
});
HTML
<header>
<div class="wrap">
<nav>
<ul class="menu">
<li>Home</li>
<li class="nav">Services
<ul class="products-nav">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Projects</li>
<li>Projects</li>
<li>Projects</li>
<li>Projects</li>
</ul>
</nav>
</div>
</header>
<div class="banner">
</div>
CSS
.wrap {
margin: 0 auto;
width: 960px;
}
.banner {
background: #007715;
width: 100%;
height: 400px;
color: #FFF;
text-align: center;
}
.menu>li {
display: inline-block;
width: 132px;
text-align: center;
position: relative;
}
.menu>li>a {
color: #007715;
font-size: 0.813em; /* 13px */
font-weight: 700;
height: 120px;
line-height: 120px;
text-transform: uppercase;
}
.menu>li.nav>ul,.menu>li.shownav>ul {
display: none;
position: absolute;
}
.menu>li.nav:hover>ul {
display: block;
}
.products-nav {
background: #FFF;
border-bottom: 1px solid #d2d3d0;
padding: 40px 0;
position: absolute;
width: 100%;
min-width: 960px;
left: 0;
}
.products-nav>li {
width: 25%;
display: inline-block;
}
jsfiddle
Here's a FIDDLE
<li class="nav">Services ▼
<ul class="shownav">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
<li class="nav">Projects ▼
<ul class="shownav">
<li>Submenu 5</li>
<li>Submenu 6</li>
<li>Submenu 7</li>
<li>Submenu 8</li>
</ul>
</li>
.menu li.nav ul,
.menu li.shownav ul {
display: none;
position: absolute;
}
/*
.menu>li.nav:hover>ul {
display: block;
}
*/
.shownav {
background: #fff;
border-bottom: 1px solid #d2d3d0;
padding: 0;
position: absolute;
min-width: 960px;
z-index: 9999;
}
.shownav li {
width: 25%;
display: block;
float: left;
padding: 20px 0;
}
.shownav li:hover {
background: #eee;
}
$(function() {
$('.nav').click(function() {
$('.shownav').slideUp(600);
$(this).find('.shownav')
.css({
width: $(window).innerWidth() + 'px',
left: - $(this).offset().left + 'px'
})
.stop()
.slideDown(600);
});
$('.shownav').mouseleave(function() {
$(this).slideUp(600);
});
});