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>
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 using enjoy instagram plugin. I made indicators display none. I have page navigation previous and next which is center aligned.
I wrote link more using a tags below the page navigation not included in plugin. Such that it will redirect to instagram page. Now I would like to make more tag in same line of page nav.
So i gave margin-top -25px such that they are in same line but the link is not working. I created a div for more link and made it to float right,gave width:60px, margin-top:-25px , height:20px, display:inline-block. I have not made any changes in plugin. I wrote more link when plugin code ends. If any one have solution kindly help me.If any errors in grammar and spelling forgive me.If instamor div is moving to plugindiv then more link is not working.
Thanks in advance.
<div class="insta_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __( 'Instagram Section', 'aasim' ) ) ) : ?>
<?php endif; ?>
<div class="insta_more_link">
More...
</div>
</div>
css
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
}
.insta_block .widget-container {
margin-top: 30px;
}
.owl-item .box img{
width:98%;
}
.owl-pagination{
display:none;
}
.owl-theme .owl-controls .owl-buttons div{
background:#0c4c8c!important;
opacity:1!important;
font-weight:600;
}
.insta_more_link {
font-weight: 600;
float: right;
width:60px;
display: inline-block;
height:20px;
margin-top:-25px;
}
.insta_more_link a{
color:#0c4c8c;
}
.
insta_more_link {
font-weight: 600;
/* float: right;*/
width:60px;
/* display: inline-block;*/
height:20px;
position:absolute;
right:0;
bottom:0;
}
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
position: relative;
}
By making main div relative and making my morediv positon absolute I got it
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
phpFox has released a theme named "Nebula" with the version 3.5.0. On this theme, there is button on the Header and the menu slides down when the user clicks the button. (Actually not a button, but a div)
I want to add this feature to SocialEngine. But JavaScript Code contains a phpFox variable and I don't know what it refers to. I am not so good at JavaScript.
HTML:
<div id="nb_features">
Features
<div id="nb_features_holder">
Menu widget code will be added here...
</div>
</div>
JavaScript:
$Behavior.customNebula = function(){
$('#nb_features_link').click(function(){
if ($(this).hasClass('nb_is_clicked')) {
$(this).removeClass('nb_is_clicked');
$('#nb_features_holder').slideUp('fast');
} else {
$(this).addClass('nb_is_clicked');
$('#nb_features_holder').slideDown('fast');
}
return false;
});
};
CSS:
#nb_features {
position:absolute;
top:0px;
right:0px;
}
#nb_features_link,
#nb_features_link:hover {
display:block;
width:40px;
height:40px;
line-height:40px;
text-indent:-1000px;
overflow:hidden;
background:url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
margin-top:-7px;
margin-right:20px;
}
#nb_features_link:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features a.nb_is_clicked,
#nb_features a.nb_is_clicked:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features_holder {
position:absolute;
background:#4f4f4f;
right:0px;
width:980px;
border:1px #304779 solid;
border-top:0px;
display:none;
margin-top:20px;
}
#nb_features_holder ul li a,
#nb_features_holder ul li a:hover {
float:left;
color:#fff;
height:30px;
line-height:30px;
padding:0px 10px 0px 10px;
text-decoration:none;
}
#nb_features_holder ul li a.menu_is_selected,
#nb_features_holder ul li a.menu_is_selected:hover {
background:#009AEF;
color:#fff;
}
#nb_features_holder ul li a:hover {
background:#2F2F2F;
-webkit-transition: all 0.50s ease;
-moz-transition: all 0.50s ease;
-o-transition: all 0.50s ease;
}
What should I do to make this code work with SocialEngine?
Well the $Behavior namespace is a wrapper for the onLoad event, is this the js variable you were talking about? If it is you can replace it for the more conventional jquery/mootools/etc way and it would probably work although you would have to match the selectors properly, dont know if the code you posted is everything you need
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;
}