I have a SoundCloud music player on my website but I would like it to have a position: fixed; property but whenever I try my image slider covers it. I have tried using z-index but I may have not used it properly, any help is appreciated.
My Code:
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>The Free Loves</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="freeloves.css">
</head>
<body>
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/logo.png" class="logo" alt="The Free Loves" width="544" height="100" /></li>
<li>Home</li>
<li>Album <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>Album Featured</li>
<li class="submenu-item2">No Space<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Album 1 Column, No Space</li>
<li>Album 2 Columns, No Space</li>
<li>Album 3 Columns, No Space</li>
<li>Album 4 Columns, No Space</li>
</ul>
</li>
<li class="submenu-item62">With Space <img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Album 1 Column With Space</li>
<li>Album 2 Columns With Space</li>
<li>Album 3 Columns With Space</li>
<li>Album 4 Columns With Space</li>
</ul>
</li>
<li id="menu-item-3251" class="menu-item menu-item-type-taxonomy menu-item-object-album menu-item-3251">Inside Album</li>
</ul>
</li>
<li>Event <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>Event List</li>
<li>Event List With Month</li>
<li>Event Widget Style</li>
<li>Single Event</li>
</ul>
</li>
<li>Members</li>
<li>Pages <img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li>404 Page</li>
<li class="submenu-item50">Features <img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>New Page Builder</li>
<li>Parallax/Color Wrapper</li>
<li>Custom Skin</li>
<li>Sidebar Size Customizable</li>
<li>Scalable Container</li>
<li>Floating Navigation</li>
<li>Boxed/Full Style</li>
<li>Woocommerce Friendly</li>
<li>Mega Menu</li>
<li>Unlimited Sidebar</li>
<li>Font Uploader</li>
</ul>
</li>
<li class="submenu-item51">Shop<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Shop With Sidebar</li>
<li>Shop Full Width</li>
<li>Cart</li>
<li>Checkout</li>
<li>My Account</li>
</ul>
</li>
<li>Contact Page 1</li>
<li>Contact Page 2</li>
<li class="submenu-item52">Video Tutorial<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Installing theme and Setting as demo site</li>
<li>Page Builder</li>
<li>Creating Portfolio & Filterer</li>
<li>Creating Blog</li>
<li>Thumbnail Management</li>
<li>Creating Gallery</li>
</ul>
</li>
<li class="submenu-item53">Gallery<img src="arrow.png" alt="arrow" class="arrow2">
<ul class="dl-submenu">
<li>Gallery 2 Columns</li>
<li>Gallery 3 Columns</li>
<li>Gallery 4 Columns</li>
<li>Gallery 5 Columns</li>
<li>Gallery 2 Columns With Caption</li>
<li>Gallery 3 Columns With Caption</li>
<li>Gallery 4 Columns With Caption</li>
<li>Gallery 5 Columns With Caption</li>
</ul>
</li>
<li class="menu-item">Testimonial</li>
</ul>
</li>
<li class="menu-item">Portfolio<img src="arrow.png" alt="arrow" class="arrow">
<ul>
<li class="submenu-item54">Portfolio With Text<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio 1 Column With Text And Space</li>
<li>Portfolio 2 Columns With Text And Space</li>
<li>Portfolio 3 Columns With Text And Space</li>
<li>Portfolio 4 Columns With Text And Space</li>
<li>Portfolio 2 Columns With Text, No Space</li>
<li>Portfolio 3 Columns With Text, No Space</li>
<li>Portfolio 4 Columns With Text, No Space</li>
</ul>
</li>
<li class="submenu-item70">Portfolio Modern<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio 1 Column Modern Style With Space</li>
<li>Portfolio 2 Columns Modern Style With Space</li>
<li>Portfolio 3 Columns Modern Style With Space</li>
<li>Portfolio 4 Columns Modern Style With Space</li>
<li>Portfolio 2 Columns Modern Style, No Space</li>
<li>Portfolio 3 Columns Modern Style, No Space</li>
<li>Portfolio 4 Columns Modern Style, No Space</li>
</ul>
</li>
<li class="submenu-item71">Portfolio With Filter<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Portfolio Grid 1 Columns With Filter</li>
<li>Portfolio Grid 2 Columns With Filter</li>
<li>Portfolio Grid 3 Columns With Filter</li>
<li>Portfolio Grid 4 Columns With Filter</li>
</ul>
</li>
</ul>
<li class="menu-item">Blog<img src="arrow.png" alt="arrow" class="arrow3">
<ul>
<li class="submenu-item72">Blog Full<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog Full With Right Sidebar</li>
<li>Blog Full With Left Sidebar</li>
<li>Blog Full With Both Sidebar</li>
<li>Blog Full Without Sidebar</li>
</ul>
</li>
<li class="submenu-item73" data-column="three columns" data-size="1/4">Blog Column<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog 1 Column (Right Sidebar)</li>
<li>Blog 2 Columns (Right Sidebar)</li>
<li>Blog 3 Columns</li>
<li>Blog 4 Columns</li>
</ul>
</li>
<li class="submenu-item74">Blog Masonry<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog 2 Columns – Masonry (Right Sidebar)</li>
<li>Blog 3 Columns – Masonry</li>
<li>Blog 4 Columns – Masonry</li>
</ul>
</li>
<li class="submenu-item55">Blog Medium<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Blog Medium With Left Sidebar</li>
<li>Blog Medium With Right Sidebar</li>
<li>Blog Medium With Both Sidebar</li>
<li>Blog Medium Without Sidebar</li>
</ul>
</li>
</ul>
<li>Shortcodes <img src="arrow.png" alt="arrow" class="arrow4">
<ul>
<li class="submenu-item61 menu-code">Set 1<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Accordion/Toggle Box</li>
<li>Audio Shortcode</li>
<li>Button</li>
<li>Column Shortcode</li>
<li>Divider</li>
<li>Event Widget</li>
<li>Gallery Shortcode</li>
</ul>
</li>
<li class="submenu-item60 menu-code">Set 2<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Heading Tag</li>
<li>icons & icon boxes</li>
<li>Lightbox & Frames</li>
<li>Notification Boxes</li>
<li>Members</li>
<li>Music Player</li>
<li>Post Slider</li>
</ul>
</li>
<li class="submenu-item80">Set 3<img src="arrow.png" alt="arrow" class="arrow2">
<ul class="sub-menu">
<li>Price Table</li>
<li>Process</li>
<li>Progress Circle</li>
<li>Skills</li>
<li>Slider Shortcode</li>
<li>Space</li>
</ul>
</li>
<li class="submenu-item81">Set 4<img src="arrow.png" alt="arrow" class="arrow2">
<ul>
<li>Styled Box</li>
<li>Stunning Text</li>
<li>Table</li>
<li>Tabs</li>
<li>Testimonial & Quote</li>
<li>Typography</li>
<li>Video</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="slider">
<div id="toggle-left" class="toggles"><i><img src="arrow-right.png" alt="left arrow" class="toggle-arrow" id="left-arrow"></i></div>
<div id="toggle-right" class="toggles"><i><img src="arrow-right.png" alt="right arrow" class="toggle-arrow"></i></div>
<ul class="slides">
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<div class="music">
<iframe width="100%" height="166px" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F210643109&auto_play=false&show_artwork=true&color=ff7700" class="music-player"></iframe>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").children("ul").hide(); //hides the lists when documents loads
$(".nav ul li").hover(
function(){//onmouseover
$(this).children("ul").delay(450).slideDown(200);
},
function(){//onmouseout
$(this).children("ul").slideUp(200);
});
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.li');
var $slideImg = $slides.find('img');
var $toggleLeft = $('#toggle-left');
var $toggleRight = $('#toggle-right');
var $pauseBtn = $('#pause-btn');
var $playBtn = $('#play-btn');
//configuration
var width = $slider.width();
var animationSpeed = 1500;
var pause = 9000;
var currentSlide = 1;
var interval;
$slideContainer.css('width', width * $slides.length);
$slideImg.css('width', width);
$pauseBtn.click(function(){stopSlider();$pauseBtn.toggle();$playBtn.toggle();});
$playBtn.click(function(){startSlider();$playBtn.toggle();$pauseBtn.toggle();});
$toggleLeft.click(function(){
stopSlider();
if (currentSlide === 1) {
currentSlide = $slides.length;
$slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
currentSlide--;
});
} else {
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
currentSlide--;
});
}
startSlider();
});
$toggleRight.click(function(){
stopSlider();
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
startSlider();
});
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
startSlider();
});
</script>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 16px;
background-color: #000;
}
body, html {
margin: 0;
height: 100%;
width: 100%;
}
.nav.smaller {
width: 100%;
padding-bottom: 5px;
padding-top: 5px;
height: 30px;
}
.nav-wrapper {
width: 100%;
margin: 0;
text-align: left;
}
.nav {
background-color: rgba(34,34,34,0.5);
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 2;
width: 100%;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
margin-right: 0px;
}
.nav ul li a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li ul li:hover img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li ul li img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul ul {
display: none;
position: absolute;
background-color: #222;
border: 5px solid #222;
min-width: 100px;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a,visited {
color: #ccc;
}
.nav ul ul li a:hover {
color: white;
transition: color 0.2s ease-in;
}
.nav ul li ul li.submenu-item52 ul {
min-width: 350px;
}
.nav ul ul li.submenu-item2 ul {
left: 147px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item50 ul {
left: 150px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item62 ul {
left: 147px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item51 ul {
left: 150px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item52 ul {
left: 150px;
top: 252px;
}
.nav ul ul li.submenu-item53 ul {
left: 150px;
top: 303px;
min-width: 250px;
}
.nav ul ul li.submenu-item54 ul {
left: 190px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item55 ul {
left: 150px;
top: 151px;
min-width: 345px;
}
.nav ul ul li.submenu-item60 ul {
left: 152px;
top: 50px;
}
.nav ul ul li.submenu-item61 ul {
left: 150px;
top: -1px;
}
.nav ul ul li.submenu-item70 ul {
left: 189px;
top: 50px;
min-width: 350px;
}
.nav ul ul li.submenu-item71 ul {
left: 189px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item72 ul {
left: 140px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item73 ul {
left: 150px;
top: 50px;
min-width: 345px;
}
.nav ul ul li.submenu-item74 ul {
left: 150px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item80 ul {
left: 153px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item81 ul {
left: 153px;
top: 151px;
min-width: 350px;
}
.menu-code {
max-width: 200px;
min-width: 150px;
}
.menu-code ul li {
max-width: 300px;
min-width: 250px;
}
.logo {
width: 75%;
height: 75%;
vertical-align: middle;
margin-left: 100px;
}
.nav ul li ul {
border-top: 1px solid #D4941F;
}
ul li ul li {
border-bottom: 1px solid #111;
}
ul li ul {
border-right: 5px solid #111;
}
.slider {
overflow: hidden;
position: relative;
}
.slides, .slide {
list-style: none;
margin: 0;
padding: 0;
}
.slides img {
margin: auto;
width: 100%;
height: 971px;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.slide {
float: left;
}
.slider .toggles {
color: #000;
height: 48px;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
transition: all .3s linear;
width: 48px;
z-index: 3;
}
.slider .toggles:hover {
cursor: pointer;
}
.slider:hover .toggles {
opacity: 1;
}
.slider .toggles i:before {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.slider #toggle-right i:before, #slider #toggle-left i:before {
height: 20px;
width: 18px;
}
#toggle-right {
right: 0;
margin-right: 100px;
margin-bottom: 550px;
}
#toggle-left {
left: 0;
margin-bottom: 550px;
margin-left: 75px;
}
#left-arrow {
transform: rotate(180deg);
}
.toggle-arrow {
width: 100px;
height: 180px;
opacity: 0.6;
}
.music {
position: relative;
}
It looks like the overflow:hidden on your slider is causing your music player to not display. I removed it and the slider works as expected, plus the music player is shown. Try modifying your CSS to look like this (not sure if you want the music player at the bottom of the screen, but position it as you want):
.slider {
position: relative;
}
.music {
position: fixed;
bottom: 0;
width: 100%;
}
Related
I'm working on the responsive menu. when we resize the screen menu items will be appear down is working fine but the problem is onClick on red button is working fine. When I refresh the page all items visible. I want before it will be hidden on click the red button then the menu will appear.
It is coming like this i want to hide overflow menu
onClick working fine. Before the click, it will be hidden
I have taken inspiration from here
var h = 30;
var val = 0;
$('.click').click(function() {
if ($('ul li.menu-item').hasClass('show')) {
$('ul li.menu-item').removeClass('show');
$('ul li.menu-item').removeClass('drop')
return;
}
val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('drop').css('opcaity', '1');;
$(this).css('top', 'calc(100% + ' + val + 'px)');
val += h;
}
$('ul li.menu-item').addClass('show');
})
})
.primary-menu {
position: relative;
width: 64%;
margin: 0 auto;
max-height: 50px;
overflow: hiddin;
background: #ccc;
}
ul.menu-item {
box-sizing: border-box;
position: relative;
}
.menu-item {
display: inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
padding: 10px;
text-transform: capitalize;
list-style: none;
background-color: #88c0c7;
position: relative;
}
li.drop {
display: block;
position: absolute;
right: 0;
}
ul.sub-menu {
flex-direction: column;
position: absolute;
top: 52px;
display: none;
background-color: #000;
color: #fff;
}
.menu-item:hover ul.sub-menu {
display: block;
}
.drop ul.sub-menu {
position: absolute;
top: 36%;
left: -72%;
}
.click {
position: absolute;
opacity: 0;
background: red;
right: -5%;
top: -2%;
width: 40px;
height: 40px;
margin: 4px;
z-index: 2;
}
.hide {
opacity: 0;
}
/* Small Desktop Resolution and iPad Landscape
======================================================================== */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
.click {
opacity: 1;
right: 2%;
}
}
/* iPad Portrait
======================================================================== */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.click {
opacity: 1;
right: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
<ul>
<li class="menu-item">Home
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">About us</li>
<li class="menu-item">Service
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">product</li>
<li class="menu-item">packages</li>
<li class="menu-item">contact</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
</ul>
<div class="click"></div>
</div>
hope this will be useful.
var h = 30;
var val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('hide');
}
})
$('.click').click(function() {
if ($('ul li.menu-item').hasClass('hide')) {
$('ul li.menu-item').removeClass('hide');
}
$('ul li.menu-item').each(function() {
if($(this).hasClass('drop')){
$(this).addClass('hide');
}
});
if ($('ul li.menu-item').hasClass('show')) {
$('ul li.menu-item').removeClass('show');
$('ul li.menu-item').removeClass('drop')
return;
}
val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('drop').css('opcaity', '1');;
$(this).css('top', 'calc(100% + ' + val + 'px)');
val += h;
}
$('ul li.menu-item').addClass('show');
})
})
.primary-menu {
position: relative;
width: 100%;
margin: 0 auto;
max-height: 50px;
overflow: hiddin;
background: #ccc;
}
ul.menu-item {
box-sizing: border-box;
position: relative;
}
.menu-item {
display: inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
padding: 10px;
text-transform: capitalize;
list-style: none;
background-color: #88c0c7;
position: relative;
}
li.drop {
display: block;
position: absolute;
right: 0;
}
ul.sub-menu {
flex-direction: column;
position: absolute;
top: 52px;
display: none;
background-color: #000;
color: #fff;
}
.menu-item:hover ul.sub-menu {
display: block;
}
.drop ul.sub-menu {
position: absolute;
top: 36%;
left: -72%;
}
.click {
position: absolute;
opacity: 0;
background: red;
right: -5%;
top: -2%;
width: 40px;
height: 40px;
margin: 4px;
z-index: 2;
}
.hide {
opacity: 0;
}
/* Small Desktop Resolution and iPad Landscape
======================================================================== */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
.click {
opacity: 1;
right: 2%;
}
}
/* iPad Portrait
======================================================================== */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.click {
opacity: 1;
right: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
<ul>
<li class="menu-item">Home
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">About us</li>
<li class="menu-item">Service
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">product</li>
<li class="menu-item">packages</li>
<li class="menu-item">contact</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
</ul>
<div class="click"></div>
</div>
Is it possible to make the position absolute dropdown stay on top of the scrollable container, and move along with the position relative parent when scrolling? Right now, the dropdown appears within the scrollable area.
The screenshot below is what I want to achieve. I'm also open to javascript solutions if needed.
jsFiddle
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
An easy way is to make the position of dropdown fixed, but make sure to apply the left and top values accordingly. Another way is to append the dropdown menu outside the ul element, so when it appears it will not be wrapped within it.
.dropdown {
position: fixed;
}
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: fixed;
background-color: #fff;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<ul class="navbar">
<li class="navbar-item">
<a>Item A</a>
<ul class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
Edit
I added one more snippet that does not use fixed position. It changes its coordinates when open based on the parent offset.
$('#menu1, #submenu1').mouseover(function(event) {
$('#submenu1').addClass("show").css($('#menu1').offset());
});
$('#menu1, #submenu1').mouseleave(function(event) {
$('#submenu1').removeClass("show");
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
display: inline-block;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.dropdown.show {
display: block;
margin-left: 1px;
background-color: #fff;
}
.dropdown-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
<li id="menu1" class="navbar-item">
<a>Item A</a>
</li>
<li class="navbar-item"><a>Item B</a></li>
<li class="navbar-item"><a>Item C</a></li>
<li class="navbar-item"><a>Item D</a></li>
<li class="navbar-item"><a>Item E</a></li>
</ul>
<ul id="submenu1" class="dropdown">
<li class="dropdown-item">Sub Item A</li>
<li class="dropdown-item">Sub Item B</li>
<li class="dropdown-item">Sub Item C</li>
</ul>
Here's an option using jQuery.
Basically, as others have mentioned, you'll have to move the subnav items outside of the main nav's wrapper, so that they are not hidden.
We can put them in their own wrapper that has a similar markup to the main nav's wrapper, and then match them up using a data element to allow for showing/hiding on click.
Then, when we scroll the main navbar, we can sync the subnav wrapper to that element's scroll position, so the subnav items appear to be fixed to the main nav items.
Lastly, we can hide the subnav wrapper's scroll bar with CSS.
The snippet below should get you the general idea, then you can style it as necessary to make it look more like the primary and secondary nav items are connected.
Click a nav item in the main nav, then scroll to the side to see it in action:
$(function(){
var navbar = $('.navbar');
var subnavBar = $('.subnavs-wrapper .scrollbar-hider');
$(navbar).find('li').each(function(){
var dataId = $(this).attr('data-id');
var matchingUl = $(this).parent().next().find('ul[data-id="' + dataId + '"]');
$(this).on('click', function(){
$(matchingUl).css('visibility') == 'hidden' ?
$(matchingUl).css('visibility', 'visible') : $(matchingUl).css('visibility', 'hidden');
});
$(navbar).on('scroll', function(){
$(subnavBar).scrollLeft($(this).scrollLeft());
});
});
});
.navbar {
padding-left: 0;
white-space: nowrap;
overflow: auto;
display: flex;
}
.navbar-item {
position: relative;
margin-left: 0;
list-style: none;
flex-shrink: 0;
width: 200px;
text-align: center;
border: 1px solid;
}
.dropdown {
position: absolute;
padding-left: 0;
width: 200px;
box-shadow: 0 1px 0 1px black;
display: none;
}
.navbar-item {
margin-left: 0;
list-style: none;
}
.navbar-item:hover .dropdown {
display: block;
}
.subnavs-wrapper {
overflow: hidden; /* hide scrollbar */
}
.subnavs-wrapper .scrollbar-hider {
display: flex;
overflow: auto;
padding-bottom: 50px; /* hide scrollbar */
margin-bottom: -50px; /* hide scrollbar */
}
.subnav {
width: 200px;
padding-left: 0;
list-style: none;
visibility: hidden;
flex-shrink: 0;
border: 1px solid black;
}
<ul class="navbar">
<li class="navbar-item" data-id="one"><a>Item A</a>
<li class="navbar-item" data-id="two"><a>Item B</a></li>
<li class="navbar-item" data-id="three"><a>Item C</a></li>
<li class="navbar-item" data-id="four"><a>Item D</a></li>
<li class="navbar-item" data-id="five"><a>Item E</a></li>
</ul>
<div class="subnavs-wrapper">
<div class="scrollbar-hider">
<ul class="subnav" data-id="one">
<li>Sub Item A.A</li>
<li>Sub Item A.B</li>
<li>Sub Item A.C</li>
</ul>
<ul class="subnav" data-id="two">
<li><a>Sub Item B.A</a></li>
</ul>
<ul class="subnav" data-id="three">
<li><a>Sub Item C.A</a></li>
<li><a>Sub Item C.B</a></li>
</ul>
<ul class="subnav" data-id="four">
<li><a>Sub Item D.A</a></li>
<li><a>Sub Item D.B</a></li>
</ul>
<ul class="subnav" data-id="five">
<li><a>Sub Item E.A</a></li>
<li><a>Sub Item E.B</a></li>
</ul>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Above is the result I want, each drop-down list is under the main title.
For example:
A1, A2, A3, A4 is under A when I click the expand collapse button.
B1, B2, B3, B4 is under B when I click the second expand collapse button.
But now my drop-down list is not aligned accordingly. You can check my code for more details. Hoping that some of you could provide me with some advice.
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.es_expandct, .es_expandct1, .es_expandct2 {
display: none;
position:absolute;
padding-top: 20px;
margin: 0 10px;
}
.es_epdtitle, .es_epdtitle1, .es_epdtitle2{
background:url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 30%;
float:left;
background-position:right 0px;
cursor:pointer;
background-color:#ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle, .collapsed .es_epdtitle1, .collapsed .es_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Add position:relative to parent to make the drop-down position according to it and move float and width from text_maroon_16.. to the parent mobexpand to maintain the width and the style
See code snippet:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
margin: 0 10px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position: right 0px;
cursor: pointer;
background-color: #ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.mobexpand {
position: relative;
width: 30%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
You could always use flex:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
padding: 5px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 100%;
background-position: right center;
cursor: pointer;
background-color: #ccc;
padding: 5px;
margin: 0;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.main-ul {
display: flex;
}
.mobexpand {
padding: 10px;
flex: 1 0 33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-ul">
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
I am working on Superfish Menu with some custom styles to make menu full width and responsive. My project works perfectly on Google Chrome and Firefox, but not in IE 11.
Take a look in this Sample
* { margin:0; padding:0; }
html { height: 100%; width: 100%; }
body { font-size:13px; color:#777; text-align:center; min-width:250px; position:relative; }
body > .wrapper { position:relative; }
.page { margin: 0 auto; padding: 0 0 0; text-align: left; width: 900px; }
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { position: relative; float: none; width: 100%; display: table; font-family: Tahoma, Helvetica, Arial, sans-serif; }
.sf-menu li { position: relative; -webkit-transition: background .2s; -moz-transition: background .2s; -o-transition: background .2s; transition: background .2s; }
.sf-menu ul { position: absolute; padding-top: 15px; padding-bottom: 15px; display: none; top: 100%; left: 0; z-index: 99; min-width: 12em; }
.sf-menu li.last > ul { left: inherit; right:0; }
.sf-menu > li { float: none; display: table-cell; }
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; }
.sf-menu a { display: block; position: relative; zoom: 1; }
.sf-menu ul ul { top: 0; left: 100%; }
/*** Default Skin ***/
#menu-icon, .sf-menu-phone, .sf-menu-block { display: none; }
.sf-menu { border:1px solid #ddd; border-bottom-color:#b0afaf; background:#e4e5e6; box-shadow:0 3px 6px rgba(0,0,0,0.08); }
.sf-menu > li { border-right: 1px solid #ddd; vertical-align: middle; }
.sf-menu > li:last-child { border-right: 0; }
.sf-menu > li:last-child > ul ul { left: auto; right: 100%; }
.sf-menu li a { color: #333; text-decoration: none; padding: 0; }
.sf-menu > li > a > span { display: block; font-size: 1.4em; line-height: 18px; cursor: pointer; padding: 18px 5px; text-align: center; }
.sf-menu li ul a span { white-space: normal; }
.sf-menu > li.parent > a span { margin-right: 0; }
.sf-menu > li.sfHover > a,
.sf-menu> li > a:hover,
.sf-menu > li.active > a { background: #fff; color: #000; }
.sf-menu ul { background-color: #FFF; border-top:5px solid #515151; box-shadow:0 4px 10px 0 rgba(150, 150, 150, 1); }
.sf-menu > li > a:before,
.sf-menu li li.parent > a:before { font-size: 14px; color:#ddd; float: right; }
.sf-menu > li > a:before { line-height: 54px; margin-right: 10px; }
.sf-menu li li a { display:block; background: none; font-size: 13px; line-height: 16px; color: #777; padding:4px 20px; }
.sf-menu li li > a:hover,
.sf-menu li li.sfHover > a,
.sf-menu li li.active > a,
.sf-menu li li > a:hover:before,
.sf-menu li li.sfHover > a:before,
.sf-menu li li.active > a:before { color: #333; }
.sf-arrows .sf-with-ul { padding-right: 0.5em; }
.sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #000; border-top-color: rgba(0,0,0,1); }
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #FFF; }
.sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #000; border-left-color: rgba(0,0,0,1); }
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #999; }
/* MegaMenu */
.mega-pos-01 { position: initial !important; }
.mega-pos-02 { position: relative !important; }
.megamenu { }
.megamenu > li.last-col > ul,
.megamenu > li.last-col > ul ul { left: auto; right: 100%; }
.megamenu li { float:left; padding: 0; text-align:left; margin-left:2%; }
.megamenu li ul li { float:none; width: auto; margin-left:0; }
.megamenu li ul a span { white-space: nowrap; }
.mega-wFull { width: 100% !important; }
.mega-w200 { width: 200px; }
.mega-w250 { width: 250px; }
.mega-w300 { width: 300px; }
.mega-w350 { width: 350px; }
.mega-w400 { width: 400px; }
.mega-w450 { width: 450px; }
.mega-w500 { width: 500px; }
.mega-w550 { width: 550px; }
.mega-w600 { width: 600px; }
.mega-w650 { width: 650px; }
.mega-w700 { width: 700px; }
.mega-col2 li { width: 48%; }
.mega-col3 li { width: 31.3333%; }
.mega-col4 li { width: 23%; }
.mega-col5 li { width: 18%; }
.mega-col6 li { width: 14.6666%; }
.mega-col7 li { width: 12.2857%; }
.mega-col8 li { width: 10.5%; }
<body>
<div class="wrapper">
<div class="page">
<ul id="nav" class="sf-menu">
<li class="level0 level-top parent first"><span>Category 01</span>
<ul class="level0 ">
<li class="level1 first "><span>cabelos</span></li>
<li class="level1 "><span>olhos</span></li>
<li class="level1 "><span>lábios</span></li>
<li class="level1 "><span>corpo</span></li>
<li class="level1 "><span>pescoço</span></li>
<li class="level1 first last last-col"><span>unhas</span></li>
</ul>
</li>
<li class="level0 level-top parent mega-pos-01"><span>Category 02</span>
<ul class="level0 megamenu mega-wFull mega-col6">
<li class="level1 parent first "><span>subcategoria 01</span>
<ul class="level1 ">
<li class="level2 first last "><span>face</span></li>
</ul>
</li>
<li class="level1 "><span>subcategoria 41</span></li>
<li class="level1 "><span>subcategoria 02</span></li>
<li class="level1 "><span>subcategoria 03</span></li>
<li class="level1 "><span>subcategoria 04</span></li>
<li class="level1 parent last-col"><span>subcategoria 05</span>
<ul class="level1 ">
<li class="level2 parent first "><span>subcategoria 37</span>
<ul class="level2 ">
<li class="level3 first "><span>subcategoria 34</span></li>
<li class="level3 first last "><span>subcategoria 33</span></li>
</ul>
</li>
<li class="level2 parent first last "><span>subcategoria 38</span>
<ul class="level2 ">
<li class="level3 first "><span>subcategoria 36</span></li>
<li class="level3 first last "><span>subcategoria 35</span></li>
</ul>
</li>
</ul>
</li>
<li class="level1 "><span>subcategoria 06</span></li>
<li class="level1 "><span>subcategoria 07</span></li>
<li class="level1 "><span>subcategoria 08</span></li>
<li class="level1 "><span>subcategoria 09</span></li>
<li class="level1 "><span>subcategoria 10</span></li>
<li class="level1 last-col"><span>subcategoria 11</span></li>
<li class="level1 "><span>subcategoria 12</span></li>
<li class="level1 "><span>subcategoria 13</span></li>
<li class="level1 "><span>subcategoria 14</span></li>
<li class="level1 "><span>subcategoria 15</span></li>
<li class="level1 "><span>subcategoria 16</span></li>
<li class="level1 last-col"><span>subcategoria 17</span></li>
<li class="level1 "><span>subcategoria 18</span></li>
<li class="level1 "><span>subcategoria 19</span></li>
<li class="level1 "><span>subcategoria 20</span></li>
<li class="level1 "><span>subcategoria 21</span></li>
<li class="level1 "><span>subcategoria 22</span></li>
<li class="level1 last-col"><span>subcategoria 23</span></li>
<li class="level1 "><span>subcategoria 24</span></li>
<li class="level1 "><span>subcategoria 25</span></li>
<li class="level1 "><span>subcategoria 26</span></li>
<li class="level1 "><span>subcategoria 27</span></li>
<li class="level1 "><span>subcategoria 28</span></li>
<li class="level1 last-col"><span>subcategoria 29</span></li>
<li class="level1 "><span>subcategoria 30</span></li>
<li class="level1 "><span>subcategoria 31</span></li>
<li class="level1 "><span>subcategoria 32</span></li>
<li class="level1 "><span>feminino</span></li>
<li class="level1 "><span>masculino</span></li>
<li class="level1 first last last-col"><span>desodorante</span></li>
</ul>
</li>
<li class="level0 level-top "><span>Category 03</span></li>
<li class="level0 level-top "><span>Category 04</span></li>
<li class="level0 level-top parent last "><span>Category 05</span>
<ul class="level0 ">
<li class="level1 first "><span>outros</span></li>
<li class="level1 "><span>gel de banho</span></li>
<li class="level1 parent first last "><span>loção corporal</span>
<ul class="level1 ">
<li class="level2 first "><span>subcategoria 40</span></li>
<li class="level2 first last "><span>subcategoria 39</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
To test, mouseover the menu item "Category 02" and see how this work well on Chrome and FF but not in IE.
I'll appreciate any help!
Thanks a lot!
Changing the position CSS attribute for the mega-pos-01 class elements from initial to static seems to have done the trick for me. Pity, I was hoping for some jQuery maneuvering.
.mega-pos-01 { position: static !important; }
http://jsfiddle.net/cg0bnpjo/
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);
});
});