I'm creating a responsive menu for which I'm using slidetoggle. There is an a element I click to trigger a slideToggle on the .menu element. The html and css for that element look like this:
<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
<i class="fa fa-bars"></i><i class="fa fa-times"></i>
<div class="menu">
<ul>
<li class="page_item page-item-9">Contact</li>
<li class="page_item page-item-5">Features</li>
<li class="page_item page-item-2">Over MonkeyApps</li>
<li class="page_item page-item-7">Prijzen</li>
</ul>
</div>
</nav>
All CSS associated with these elements:
.main-navigation {
margin: 20px 0;
padding: 0 25px;
}
.main-navigation a#responsive-menu {
color: #fff;
font-size: 32px;
float: right;
}
.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
text-decoration: none;
}
.main-navigation a#responsive-menu i {
display: none;
}
.main-navigation a#responsive-menu i:first-child {
display: inline;
}
.main-navigation a#responsive-menu.active i:first-child {
display: none;
}
.main-navigation a#responsive-menu.active i {
display: inline;
}
.menu {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
.main-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.main-navigation ul li {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
background: #0091ea;
}
.main-navigation ul li a {
display: inline-block;
font-family: 'Alright_bold';
font-size: 16px;
font-weight: normal;
color: #fff;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: relative;
padding-bottom: 3px;
}
.main-navigation ul li a:hover {
text-decoration: none;
}
.main-navigation ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.main-navigation ul li a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:before {
width: 100%;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
As you see there is one wrapper for the menu and the button that triggers the mobile menu. The bit of jquery which includes slideToggle:
$('#responsive-menu').click(
function () {
$(".menu").slideToggle();
$("#responsive-menu").toggleClass("active");
}
);
The thing with this is that the slideToggle is in fact triggered and there is stuff happening. Also there are no errors whatsoever. The menu isn't being made visible though and I really can't figure out why, does anyone know how to solve this?
A JSFiddle for the problem:
JSFiddle
actually you are using jquery alpha
use this jquery:
http://code.jquery.com/jquery-1.9.1.js
$(document).ready(function(){
$('#responsive-menu').click(
function () {
$(".menu").slideToggle();
$("#responsive-menu").toggleClass("active");
}
);
});
.main-navigation {
margin: 20px 0;
padding: 0 25px;
}
.main-navigation a#responsive-menu {
color: #000;
font-size: 32px;
float: right;
}
.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
text-decoration: none;
}
.main-navigation a#responsive-menu i {
display: none;
}
.main-navigation a#responsive-menu i:first-child {
display: inline;
}
.main-navigation a#responsive-menu.active i:first-child {
display: none;
}
.main-navigation a#responsive-menu.active i {
display: inline;
}
.menu {
/*display: none;*/
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
.main-navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.main-navigation ul li {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
background: #0091ea;
}
.main-navigation ul li a {
display: inline-block;
font-family: 'Alright_bold';
font-size: 16px;
font-weight: normal;
color: #000;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: relative;
padding-bottom: 3px;
}
.main-navigation ul li a:hover {
text-decoration: none;
}
.main-navigation ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.main-navigation ul li a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:before {
width: 100%;
background: #fff;
transition: width .5s ease;
}
.main-navigation ul li a:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
<i class="fa fa-bars"></i><i class="fa fa-times"></i>
<div class="menu" style="display:none;">
<ul>
<li class="page_item page-item-9">Contact</li>
<li class="page_item page-item-5">Features</li>
<li class="page_item page-item-2">Over MonkeyApps</li>
<li class="page_item page-item-7">Prijzen</li>
</ul>
</div>
</nav>
Any absolute positioned element will get the left/top position from the body not within the block it's been contained. So if you want it to be contained in the parent element then parent should be relatively positioned and then if child is absolutely positioned then left/top position will be calculated within the parent container.
Try applying the z-index to the .menu:
.menu {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
z-index:1; // number as needed
}
and if you want to contain it within the parent nav element then you can use position:relative; to nav element:
.main-navigation {
margin: 20px 0;
padding: 0 25px;
position:relative;
}
Updates:
You have used an alpha version of jquery 3.0 which is still in development i guess. you should use either 2.x or 1.x versions of jquery which is production ready and can be downloaded from jquery.
When you use javascript to change style, javascript puts the style inline, and remove the style inline, but the styles defined in CSS sheets are still there and active. So when it toggle, it removes the style inline, but there will still be display: none in the CSS. Hence not showing the menu.
Remove display: none; from the CSS and add it inline, so that it doesn't show up at page load :
fiddle
.menu {
/*display: none;*/
position: absolute;
top: 80px;
left: 0;
width: 100%;
}
and in HTML :
<div class="menu" style="display:none;">
Related
I am trying to create a fullscreen navigation overlay with 2 levels of navigation.
Currently I have managed to build the fullscreen overlay along with the level 1 navigation.
https://codepen.io/anon/pen/rJJGKE
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #000;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #000;
}
.btn-close:after {
color: #000;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #000;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(135, 119, 116, 0.95);
}
.overlay .menu {
margin: 100px auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
margin-bottom: 40px;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 10px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #000;
text-transform: capitalize;
font-weight: 300;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #c3bab9;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 600!important;
font-size: 18px!important;
letter-spacing: 1px;
}
p.email a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 300!important;
font-size: 16px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #000000;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Logo
<img src="" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
Menu
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.
Would this require a jQuery solution? Any help would be appreciate.
Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
// I added this line
$(this).next('.sub').toggleClass('visible');
});
.overlay .menu ul li .sub {
max-height: 0;
transition: max-height 0.4s ease;
overflow: hidden;
}
.overlay .menu ul li .sub.visible {
max-height: 500px;
transition: max-height 0.4s ease;
}
Have a look over here (Just click on the 'Service' button)
Hi this is the scenario i have a sliding menu on right side of the website and the position of it is fixed. and there's a link "" that i want to float above it position absolute or relative with the z-index like this but even i add z-index 10000. position absolute or fixed its not showing up. outside the slider div.
Please check the image. check the green circle
NOTE: once the menu is open the #menu close is reviled
the css for it is and html honestly speaking im having a hard time for it thank you
#menu .close {
background-image: url("images/close.svg");
background-position: 4.85em 1em;
background-repeat: no-repeat;
border: 0;
cursor: pointer;
display: block;
height: 3em;
position: fixed;
right: 541px;
top: 0;
z-index: 50000;
display: block;
vertical-align: middle;
width: 7em;
}
Html
<div id="header" class="alt">
<nav id="nav">
<ul>
<li class="special">
<span> menu</span>
<div id="menu">
<div class="logo_menu">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png">
</div>
<ul>
<li>Home</li>
<li>Company Values</li>
<li>Our services</li>
<li>Need Home health care now?</li>
<li>Meet the Team</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Css
*/
#header {
-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background: #2e3842;
height: 3em;
left: 112px;
line-height: 3em;
position: absolute;
top: -38px;
width: 100%;
z-index: 10000;
}
#header h1 {
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
height: inherit;
left: 1.25em;
line-height: inherit;
position: absolute;
top: 0;
}
#header h1 a {
border: 0;
display: block;
height: inherit;
line-height: inherit;
}
#media screen and (max-width: 736px) {
#header h1 a {
font-size: 0.8em;
}
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: -5px;
top: 38px;
}
#header nav > ul {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
#header nav > ul > li {
display: inline-block;
padding: 0;
}
#header nav > ul > li > a {
border: 0;
color: #000;
display: block;
font-size: 0.8em;
padding: 0 1.5em;
text-transform: uppercase;
padding-left: 0px !important;
}
#header nav > ul > li > a.menuToggle {
outline: 0;
position: relative;
}
#header nav > ul > li > a.menuToggle:before {
background-image: url("images/bars.svg");
background-position: right center;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 3.75em;
vertical-align: top;
width: 2em;
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a.menuToggle {
padding: 0 1.5em;
}
#header nav > ul > li > a.menuToggle span {
display: none;
}
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a {
padding: 0 0 0 1.5em;
}
}
#header nav > ul > li:first-child {
margin-left: 0;
}
#header.alt {
background: transparent;
}
#header.alt h1 {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
opacity: 0;
}
.logo_menu {
margin-bottom: 30px;
}
a.menuToggle {
text-decoration: none;
}
a.menuToggle span {
padding-left: 4px;
}
Anytime you want to put an element absolute on top of an element, you want to set the parent to position:relative and put the child element in the parent.
<div class="parent">
<a class="child">Child</a>
</div>
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 2;
top: 0; //style to taste
left: 0; //style to taste
}
How can a div (menu) be collapsed when a HTML page has loaded? I tried using the following code but it's not working as the menu remains visible.
When the page has loaded, I want the menu to be collapsed on #media screen and (max-width: 768px) only. When the menu is collpased, the button should say menu +. When the menu is visible, the button should say menu -
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
window.innerWidth < 769 screens
window.innerWidth > 769 screens
Due to you requiring display: flex, one of the easiest ways to do this is with JS, you just need to add a hide() function before the click.
This will still then display your menu as display: flex as adding a display: none will change the menu to display: block when open.
$(document).ready(function() {
if(window.innerWidth < 769) {
$('#menu ul').hide();
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
});
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
Try This answer
https://jsfiddle.net/alfinpaul/umbtL1wq/2/
var windowSize = $(window).width(); // Could've done $(this).width()
if(windowSize < 768){
$('#menu ul').each(function(){
$(this).slideUp();
});
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
/*'FACH Technical Support' title*/
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
Helloo,
In your #media screen and (max-width: 768px) try adding:
#menu ul {
display:none;
}
Fiddle: https://jsfiddle.net/rq2a3b4b/1/
I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.
use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}
the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}
i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/
and i am trying to do it with my menu:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Widgets</li>
<li>Thingamabobs</li>
<li>Doohickies</li>
</ul>
</li>
<li>Contact</li>
</ul>
for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize
You want to css media query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
More details
https://developer.mozilla.org/en/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/