I have my drop down menu directly above the slideshow. Because of this, the sub-menus get hidden behind the slideshow when I hover over the menu. I would like the sub-menus to appear over the slideshow.
Slideshow Code
var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm" frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;" allowtransparency="true"'+c+o+'/iframe'+c)
Dropdown Code
.tab {
font-family: arial, verdana, san-serif;
font-size: 14px;
}
.asd {
text-decoration: none;
font-family: arial, verdana, san-serif;
font-size: 13px;
color:#4234ff;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:100px;
background:#1E5B91;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#ffffff;
text-align:center;
color:#ffeecc;
}
#nav li a:hover {
color:#470020;
}
#nav a.selected { /* style for default selected value */
color:#4234ff;
}
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
#nav ul a { /* display block will make the link fill the whole area of LI */
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777;
}
#nav ul a:hover {
text-decoration:underline;
padding-left:15px;
}
Dropdown jQuery
$(document).ready(function () {
$('#nav li').hover(function () {
$('ul', this).slideDown(350); //show its submenu
}, function () {
$('ul', this).slideUp(350); //hide its submenu
});
});
Dropdown HTML
<input type=hidden name=arav value="1*#*#*2">
<ul id='nav'>
<li><a href='#'>SHOP</a>
<ul>
<li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li>
<li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li>
</ul>
</li>
</ul>
</input
I would like my submenus that are shown when you hover over the "Shop" button to show up over the slideshow that is below it. They hide under it.
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}
#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}
Using z-index you can achieve this.
You will want to wrap your iframe and give that container a z-index value of 1 and the navigation container should have a z-index value of 2.
You will also need to set the position property value to relative for both of these containers.
#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}
Also, you may want to look into other ways of implementing the slideshow. Using document.write has potential issues: Why is document.write considered a "bad practice"?
I'm not sure how this would work if you're viewing your slideshow as in your code above (I'm not very familiar with Javascript or how this would work with iframes).
However, I came here also searching for answers, so I will post my solution in the case that it may help anyone who finds this page as I did.
I had the same issue, although my slideshow code looked like this.
<ul class="bjqs">
<li><img src="kjdsajkdhsja.png"></li>
</ul>
I found that changing the z-index to all the elements relating to the slideshow to lower than the drop down elements would not work - until I made my images background images in divs, as so:
<ul class="bjqs">
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li>
</ul>
Crummy workaround, but it did me fine for the project I was on.
For showing dropdown menu over slide show
write the code in css where you have written dropdown menu code
.dropdown_menu { visibility: visible; z-index: 100; }
it will work
Related
So I'm using a hoverdown menu at the top of my good free photos site.
On desktop, it works just fine when you hover down on it, the menu appears.
When you hover off of it, it goes away.
However, mobile does not have the hover behaviour so when on mobile you click on the menu to make it appear, you can't get rid of it.
I need it to go away if you click on the menu (but not the sublinks) or anywhere else on the page.
Here is the HTML code I am using:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
Good Free Photos Menu<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Free Stock Photos</li>
<li>Public Domain Images</li>
<li>Featured</li>
<li>Last 100 images</li>
<li>News</li>
<li>Tutorials</li>
</ul>
</li>
</ul>
</nav>
</div>
and the css:
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
I know this may require some JavaScript, but I don't know what code.
You should read the following post :
CSS :hover behaviour on touchscreen devices
The problem with your current design is that it relies on the :hover state to work, which would not always work (for keyboard navigation, and causes problem with touchscreens).
A lot of accessible implementations for dropdown menus are well documented
Your current code may work within your current configuration, all you have to do is set the focus outside of your menu, for instance:
close menu
<div class="menu-wrap">
<nav class="menu">
But this won't make accessible your menu and won't make it work in the browsers where the :hover state is not recognized as :focus
Here's what I would do:
I would start by transferring the hover state from the css hover to a class name like .dropdown-open.
Using jquery:
if the website is viewed on a computer, control this class on mouseover and mousout.
else, toggle the class on mousedown of the element.
The jQuery would look something like this:
$(document).ready(function(){
function checkWidthForMenu(){
if($(window).width() > 760) {
$('.sub-menu').mouseover(function(){
$(this).addClass('dropdown-open');
});
$('.sub-menu').mouseout(function(){
$(this).removeClass('dropdown-open');
});
} else {
$(document).mousedown(function(){
$('.sub-menu.dropdown-open').removeClass('dropdown-open');
});
$('.sub-menu').mousedown(function(){
$(this).toggleClass('dropdown-open');
});
}
}
checkWidthForMenu();
$(window).resize(checkWidthForMenu());
});
Edit:
Adam has a good point for accessibility; so in your css, add the styles for the opened menu to .sub-menu.dropdown-open, .sub-menu:focus {...} This will make it open on hover and on focus (using the tab key as navigation)
I am attempting to make a mobile navigation menu based off of this example: Basic Hamburger Menu
However, for what ever reason it does not work. When I click on the button nothing happens except rotating the 3-line graphic. The menu does not expand / appear.
When troubleshooting I have found out that if .mobile is site for display:block; instead of display:none; when the page loads, the javascript works for collapsing / hiding the menu, and making it reappear. Only the rotation of the 3-line graphic is opposite of what it should be. So, I know the javascript is working.
I just can't understand why it doesn't work with the nav hidden by default like in the example. I have played around with it for more then 3 hours so far and have gotten nowhere. There for I"m attempting to post it here to see if anyone might have any idea as to what might be going on as I am at a complete loss and about ready to wave the white flag.
This is the javascript on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('button').click(function () {
$(this).toggleClass('expanded').siblings('div').slideToggle();
});
//# sourceURL=pen.js
</script>
And the HTML / CSS is the same as the example except I have modified it so all the links are built into a UL.
HTML Code:
<div id="main_container">
<header>
<img src="<?php echo get_template_directory_uri(); ?>/assets/header3.jpg" alt"logo" width="100%">
</header>
<nav>
<div id="desktop_nav"><?php wp_nav_menu( $args ); ?></div>
</nav>
<nav>
<div id="mobile_nav" class="mobile">
<button>Toggle</button>
<div>
<?php wp_nav_menu( $args ); ?>
</div>
</div>
</nav>
And CSS Code:
#mobile_nav ul {
display: table;
width: 100%;
/*table-layout:fixed;*/
}
.mobile {
display:none;
position:relative;
width:100%;
min-height:50px;
}
.mobile div {
display:none;
}
.mobile button {
position:absolute;
top:10px;
left: 10px;
border:0;
text-indent:200%;
overflow:hidden;
background:#363636 url(assets/menu.png) center no-repeat;
border-radius:3px;
background-size:80%;
width:30px;
height:30px;
outline:none;
transition:all 400ms ease;
-webkit-transition:all 400ms ease;
transition:all 400ms ease;
}
.mobile button.expanded {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
border:0;
}
.mobile ul li a {
display: block;
background: #000;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #363636;
text-decoration: none;
color: white;
width: auto;
}
.mobile ul li:last-child {
border-bottom: none;
display: table-cell;
}
.mobile ul li a:hover,
.mobile ul li a:active,
.mobile ul li a:focus {
background: #363636;
width: 100%;
}
#media (max-width: 800px) {
.mobile {
display:block;
}
.mobile div {display:block}
#desktop_nav {
display:none;
}
}
Thanks
Adding a class to the div called "toggle" and changing the format of the javascript to the following solved the issue.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('button').click(function(){
jQuery(this).toggleClass('expanded');
jQuery(".toggle").slideToggle();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a problem with my dropkick menu for my responsive website. When the site enters iphone size it changes to this dropkick menu using dropkick.js, it's a dropdown.
My HTML:
<div id="mobilemenu">
Menu
</div>
This above code is only visible if you view the site in 320px width.
My Javascript:
<script type="text/javascript">
$(function () {
var pull1 = $('#pull');
menu1 = $('ul.menuresponsive');
menuHeight = menu1.height();
$(pull1).on('click', function (e) {
e.preventDefault();
menu1.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu1.removeAttr('style');
}
});
});
</script>
I don't really know much about Javascript, this was taken from a tutorial.
My CSS for when the site is in 320px:
/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }
/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }
As it looks now, the menu is constantly open as shown below, I would very much like it to be closed by default but I can't seem to find a solution.
My menu is rendered as a <ul> and <li> dynamically inside the <div id="mobilemenu">
In the tutorial you link to the demo example has two media queries - one for 515px and one for 320px.
The css for the 515px will be inherited by the 320px one and it contains the code you need to close the menu I think.
Try adding this code into your media query:
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
I am using a megamenu in my site, which is purely css based. The disadvantage is that, it doesn't have any animation. The dropdown is getting show all on a sudden. So I am thinking of converting it to jquery based toggle. Here is the current code. How can I convert it to jQuery based?
.dropdown-1column,
.dropdown-2columns,
.dropdown-3columns,
.dropdown-4columns,
.dropdown-5columns {
margin:-1px auto 0 -285px;
float:left;
position:absolute;
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #dedede;
background:#fff;
z-index:999;
display:none;
}
.menu li:hover .dropdown-1column,
.menu li:hover .dropdown-2columns,
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
display:block;
}
Here is the code http://jsfiddle.net/gsTNS/
This pretty much does what you're looking for I think. Could probably be refined:
http://jsfiddle.net/gsTNS/5/
Basically I've added a class of "has-dropdown" to each LI that has a dropdown and I've added a "dropdown" class to each dropdown DIV.
Then use jQuery to activate a slideToggle function:
jQuery("div#menu ul.menu li.has-dropdown").hover(
function () {
$(this).find("div.dropdown").slideToggle();
},
function () {
$(this).find("div.dropdown").slideToggle();
}
);
I have a menu item that which I've created using display:table-cell; to ensure that the menu tabs "lengthen" when the user expands the screen. However I need to complete the right side of the tabs to finish the rounded corner at the top. I have a separate tabRight.png which consists of a slice of the right side of the tab. I need to place this right before each "tab opening". I have exhausted everything I know and the closing doors method I found online isn't working for this case. The right side should have a transparent corner so I don't think I can put it over the existing grey background.
The code is:
CSS:
#nav ul{
display:table;
width:100%;
border-spacing: 10px;
margin:0;
padding:0;
}
#nav li{
width:20%;
display:table-cell;
background: url('tab.png') no-repeat;
color:#000;
text-align:center;
height:31px;
}
#nav a{
display:block;
text-decoration:none;
color:black;
}
p{
padding:0px;
margin:0px;
}
HTML:
<div id="nav">
<ul>
<li>
<a href="http://www.google.com">
<div>
<img src="address.png"/>
<p>Deadlines</p>
</div>
</a>
</li>
<li>About</li>
<li>Address</li>
<li>Phone</li>
</ul>
</div>
EDIT:
I have tried the after method and I get the transparent portion overlapping the left background, so as the background shows through the transparency which what I was afraid of.
EDIT 2:
I set the position of the tabRight.png to -10px (10px is the width) and that pushed the edge to the right so the transparency problem no longer occurs.
Thanks guys for your help!
If you can use CSS :after pseudo selector class, then adding position:relative; to your li and the new rule:
#nav li:after {
width:5px;
content:"";
position:absolute;
height:100%;
top:0;
right:0;
}
will add an element on the right of all the list items.
Demo here (with some borders added for clarity)
2 options:
Create a class for the tabRight image.
.tab-right {
width: 5px;
height: 31px;
background: transparent url('tabRight.png') left top no-repeat;
display: inline-block;
zoom: 1; /* for IE7 */
*display: inline; /* for IE6 */
}
Then create a new <li> element:
<li class="tab-right"></li>
Use the :after pseudo-element.
#nav li:after {
content: "";
width: 5px;
height: 31px;
float: left;
background: transparent url('tabRight.png') left top no-repeat;
}
Adjust the width and height to the actual pixel dimensions for your image.
Just add another span inside your LI, set it's margin-right to a negative enough number to accomodate the corner. Set it's with and height accordingly and background the corner image.
I am suggesting this method as it makes scripting any menu functions simpler since all li's will be a menu item