I'm trying to set-up my code so that when I click a link with the id of "#toggleNav"
<i class="fa fa-bars"></i>
It will add or remove the ".hidden" class of an element with an id of "#nav"
<ul class="navbar navCollapse" id="nav">
<span class="links">
<a href="#">
<li>Home</li>
</a>
...
".hidden" class:
*.hidden {
display: none;
}
So that it will act as a toggle on a navigation bar, but since I have this only on if the screen size is less than 600px, I would like it to default to .hidden ONLY if the screen is 599px or less, AND default to shown ONLY if the size is 600px or more.
If there's either an easier way to do it, or I need a plugin, I would be grateful for any responses that would help.
And I don't want to use any bootstrap or other frameworks - preferably just CSS or javascript, and maybe jQuery.
Thanks!
You can do this via css media queries, like so:
#media (max-width: 600px) {
*.smhidden {
display: none;
}
}
Add this class to your element so that even when the .hidden class is gone, if the screen size is less than 600, the .smhidden class will still be hiding the element.
EDIT
You can set defaults via JavaScript by using:
var windowWidth = window.innerWidth;
if (windowWidth < 600) {
$('#nav').addClass('hidden');
}
I just found a way to do this, but I would rather not use two separate buttons.
<span class="float-right">
<i class="fa fa-bars"></i>
<a href="#" id="toggleNavHide" class="hidden"><i class="fa
fa-bars"></i></a>
</span>
And the repetitive js...
$(document).ready(function(){
$("#toggleNavShow").click(function(){
$("#nav").show();
$("#toggleNavShow").hide();
$("#toggleNavHide").show();
});
$("#toggleNavHide").click(function(){
$("#nav").hide();
$("#toggleNavShow").show();
$("#toggleNavHide").hide();
});
});
If there's a way to just use one button I'd love to know... I'm not all that experienced with js.
Related
I'm following the w3 tutorials and exploring a responsive design template here (see source code for details): https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm
I'd like to edit the sidebar so that a close button is always displayed, and close the sidebar when clicked. Under it's current design, this only works for the mid-size and small windows.
I tried revising the code to remove the hidden class (so it's always displayed). However, the function does not close the sidebar when clicked:
From:
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
To:
<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
I'm missing something very elementary here. But I've fiddled with this long enough I'd like to get pointed in the right direction. The code is right, I'm guessing this may be a DOM or bubbling issue, or basic design edit? Thanks!
There appears to be an !important media query CSS rule that's probably blocking your styling from having effect:
#media (min-width: 993px)
.w3-sidebar.w3-collapse {
display: block!important;
}
I did a document.querySelector("#mySidebar").style.display = "none" and it had no effect. You could remove that !important rule or otherwise work around it...
I want to toggle bootstrap navabar from right to left instead of top to bottom.I acheived this with following code-
HTML-
<nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: #000;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="a_logo_s_s">
<img src="images/Png - Only Logo - Variant 2.png" class="img-responsive" id="logo_s_s" >
</a>
<a class="navbar-brand" href="#" id="a_logo_l_s">
<img src="images/Png - Only Text - White.png" class="img-responsive" id="logo_l_s" >
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="height: 346px !important">
<ul class="nav navbar-nav navbar-left">
<li class="active" id="l_hiw">HOW IT WORKS</li>
<li id="l_cp">COACHES</li>
<li id="l_cp">ABOUT</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="l_el">ENROLL</li>
<li id="l_ma">MANAGE ACCOUNT</li>
<li id="l_aq">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS-
.is_open{
width: 240px;
}
#myNavbar{
position: fixed;
padding-left: 10px;
padding-right: 0px;
right: 0px;
height: 100%;
}
JS-
$('[data-toggle="collapse"]').on('click',function(e) {
e.preventDefault();
setTimeout(function(){
$("#myNavbar").css({
"height":"100%",
});
},10);
$("#myNavbar").toggleClass('is_open',1000);
});
It is working fine for first 15-20 clicks then it behaves like this-
on first click does't happen anything.
on secod click navbar appears for a moment and then disappears, means both first and second click are called simultaneaously.
Edit 1:
I have used "right" property of css,"transform" property of css, "animate" function of jQuery, in which first and second takes values 0 and -240px on alternate clicks which shows a very little jerk while showing and hiding, this is happening only in chrome, working fine in other browsers.
Animate is following the behaviour described above on 1., 2., it is happening in all browsers.
Edit 2:
I added
setTimeout(function(){
$("#myNavbar").css({
"height":"100%",
});
},10);
in javascript because height of navbar goes to 1px while hiding, and thus slide effect to left becomes invisible, slide to left effect is, only visible after adding "setTimeout" without this it behaves as if height is not set to 100%.
Even I have hardcoded "height: 100%" in style attribute of navbar but still it gets overriden with "height:1px" after first click.So to keep height:100%,I found only possible way and that was to assign it value after every click.
That also may be the reason for slight jerk in showing and hiding beacuse height is changing from 1px -> 100% ->346px as I observed it in chrome console.Also,
this is happening in chrome only.
You can use jquery animate to achieve a smoother animation
$(function(){
var c=0;
$(".navbar-toggle").click(function(){
$("#myNavbar").stop().animate({right:2*100 }, 'slow');
});
});
Example
https://codepen.io/anon/pen/MvZqwM
Issue has been resolved and it had flaws like-
Custom css file was added before bootstrap css, that made browser to override custom css by bootstrap css,no matter how many times we define the style of an element in html or css.This also makes possible to declare height only once and thus getting rid of setTimeout(expandHeight,10) on every click.
.stop() (stop function) should be there before .animate (animation function) so that it can prevent previous ongoing animation otherwise browser will produce glitches.
.collapse was defined in bootstrap with block:none that made navbar unvisible (as navbar also had a class "collapse") after a click becuase custom css didn't have such declarations.
and thanks to Ovidiu Unguru
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
HTML
<nav>
<ul>
<li><a class="notDrop" href="#home">HOME</a></li>
<li><a class="notDrop" href="guides.html">GUIDES</a></li>
<li class="dropdown">
<a class="dropbtn">BRANDS</a>
<div class="dropdown-content">
NVIDIA
INTEL
CORSAIR
SAMSUNG
<li class="dropdown">
<a class="dropbtn">BUILDS</a>
<div class="dropdown-content">
GAMING
OFFICE
SERVER
MEDIACENTER
</div>
</li>
</ul>
</nav>
CSS
nav {
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
}
Javascript
window.onload = function mobile(){
if( isMobile.any() ) {
document.getElementById('nav').style.backgroundColor = "blue";
alert('Mobile');
}
}
But I can't get it to change color, what am I doing wrong? I managed
to change the color of the body but I cant of the nav.
You used the wrong javascript function. nav is a tag, not an id.
It should be getElementsByTagName("nav")[0] instead of getElementById("nav")
javascript will always return an array regardless of number of matching element using getElementsByTagName() method. So use [0] to return the first one.
You used document.getElementById but you have only nav tag from HTML5. Add id = "nav" to your nav tag.
Best regards!
Your problem here is that you are using getElementById, but have not given your nav an id.
The best way to solve this would be to add an id to your nav, as follows:
<nav id="top-nav">
And your js becomes:
document.getElementById('top-nav').style.backgroundColor = "blue";
The answer given by Super Cool Handsome Gel Boy, while it will work is impractical because it looks for any <nav> tag, so if you add more <nav> tags, or move them around, you will have to recode your javascript.
By using an id, the javascript will always target the right <nav>.
So I'm fiddling around with this design I found on http://cssmenumaker.com/menu/responsive-flat-menu but I'm having a bit of an issue when the navbar is scaled down in the browser. So full width of the browser it looks like img 1 below....and when scaled down it turns into a hamburger menu with a dropdown as depicted in img 2. The problem is it repeats since I added an extra li tag to add in 'Super Awesome Menu'. So, my question is how to remove that extra repetition in img 2(it should retain in in full width like img 1).
I tried some of the simple removeclasses but they did not work. I'm sure it's super simple and I'm just failing to see it.
I stuck the code up here (since for whatever reason it's a huge pain to indent jquery on here)
http://codepen.io/anon/pen/NxZLKo
<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li>Super Awesome Menu</li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->
You can do that using media queries. Put this line of code in you css and you are good to go.
#media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }
It will hide the first child in this case super mega awesome if you do li:nth-child(2) it will hide Home etc.
I think there's no extra link "Super Awesome Menu"
It's just the name of your menu as you configured it on lines 5 & 73 in Javascript Section of your code snippet. It's your title parameter
$("#cssmenu").menumaker({
title: "Super Awesome Menu",
format: "multitoggle"
});
Just let it empty or find another name !
Try this css
#media screen and (max-width: 680px) { #cssmenu ul.open
li:first-child{
display:none !important; } }