JQuery responsive menu won't work - javascript

I'm a novice web developer with no real jquery knowledge, so please bear with me. I'm trying to make a simple mobile responsive dropdown menu (ideally I'd like a slide down, but baby steps first). For the most part, I figured it out. However, I assigned my "Unordered List" an ID selector and it doesn't seem to function anymore. What am I overlooking? Thanks in advance!
This is my code: JSFiddle
$(document).ready(function(){
$('#toggle-button').click(function(){
$('#menu').toggleClass('show');
});
});
.show {
display: block;
}
nav {
background: black;
width: 100%;
}
.menu-bar {
width: 100%;
background: black;
height: 50px;
}
#toggle-button {
position: absolute;
top: 15px;
right: 60px;
height: 35px;
width: 35px;
background: red;
cursor: pointer;
display: block;
}
#menu {
list-style: none;
width: 100%;
display: none;
margin: 0px;
padding: 0px;
}
#menu li {
height: 50px;
background: #535252;
}
#menu li a {
display: block;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
text-decoration: none;
cursor: pointer;
}
#menu li:hover {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-bar"></div>
<nav>
<ul id="menu">
<li>Profile</li>
<li>Profile</li>
<li>Profile</li>
</ul>
</nav>
<a id="toggle-button" href="#"></a>

Use:
#menu.show {
display: block;
}
after! you defined your defaults for #menu {
https://jsfiddle.net/nw2wf3uh/6/
or use the not-so-nice !important:
https://jsfiddle.net/nw2wf3uh/7/
.show {
display: block !important; /* if .show is placed before #menu styles in CSS */
}
You can also go the other way around, setting to your #menu a .hide by default:
<ul id="menu" class="hide">
CSS:
.hide {
display: none; /* but remove display:none; from #menu now! */
}
and toggle that .hide class:
$('#toggle-button').click(function(){
$('#menu').toggleClass('hide');
// or simply: $('#menu').toggle();
});
Here you'll not run into overriding styles cause of priority and you'll not have to use the !important fix (but you might have issues with JS-disabled users if that's of any concern (you should not care much but it always depends.)).

Related

navbar, problem with the responsive navigation

When my navigation bar is displayed on a small screen (mobile example), it doesn't appear as expected, I cannot fix the problem
I tried to change my css several times but it gets worse
Can u help me please :)
navbar responsive test
#media( max-width: 1200px){
header{
/*margin: 20px;*/
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
The elements in your <header> element a floated and so the menu doesn't know where the element stops and this causes CSS to not know how to compute the height of that element
A quick fix to that would be to put overflow: hidden:
<header style="overflow: auto"> ... </header>
You can learn a lot about this from this elaborated StackOverflow answer link to answer
i have add overflow: auto on my header it s works but i can t fixe the menu panel too when i click on the button menu toggle , the text go right and i can t see him.
i think i have a problem with my "float: right" in the class .menu-toggle ;
the text isn't show in the mobile display, he go to the right and he dont take the good place...
i want to place the menu panel one below the other
home
about
services
navbar responsive with overflow : auto
#media( max-width: 1200px){
header{
/*margin: 20px;*/
overflow: auto;
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
You just need to set a bigger width for your container.
To fix your issue:
#media( max-width: 768px){
.menu-toggle{
width: 400px;
}
}
Hi Can you please follow Below Html Structure :
<header>
Logo
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY
I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}
I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Show submenu with CSS without using an unordered list

I got a question regarding showing a submenu with CSS.
I have the following HTML code:
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>
Due to implementation restriction I can not change my structure to, for example a <ul> format.
I did some research on the web to find out how I could show my submenu by using CSS. I tried the following thing:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Can anyone tell my why this does not work and how could I solve this, with respect to my current implementation.
Full code here: JSFIDDLE
PS. Any answers like use bootstrap or transform your menu to a <ul> format is not what I am looking ;)
Your code:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Your .submenu is not inside the a. You could use the sibling selector:
.navigation .submenu-wrapper a:hover + .submenu{display:block;}
But to make the submenu usable, make sure your .submenu-wrapper has the same height as its content (by giving it a fixed height or an :after{clear:both;} and do this:
.navigation .submenu-wrapper:hover .submenu{display:block;}
Since your .submenu is absolutely positioned, you also need to position its parent, or else .submenu will fall off the screen (because you gave it top:100% relative to body). Like this:
.navigation .submenu-wrapper {position: relative;}
Updated fiddle: https://jsfiddle.net/xrtjngdr/4/
You can achieve this by changing
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
To .navigation .submenu-wrapper a:hover + .submenu{display:block;}
You also have to add
.submenu:hover{
display:block;
}
Because if you want to click on your submenu, the links will disappear
Just a few small changes and you're golden.
See the comments in the code below for your changes.
.navigation {
margin: 0;
padding-left: 0;
list-style: none;
float: left;
}
.navigation .submenu-wrapper {
float: left;
display: block;
position: relative; /* add relative position */
}
.navigation > a,
.navigation .submenu-wrapper a {
float: left;
position: relative;
display: block;
font-size: 20px;
padding-right: 14px;
padding-left: 14px;
padding-top: 5.5px;
padding-bottom: 8.5px;
color: #000;
text-decoration: none;
}
.submenu {
position: absolute;
display: none; /* display none */
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
font-size: 18px;
text-align: left;
background-color: #245d94;
border: 1px solid #fff;
border-radius: 0;
box-shadow: none;
border-left: none;
border-right: none;
}
.navigation a:hover {
color: #fff;
background-color: #245d94;
}
.navigation a.active {
color: #fff;
background-color: #e36c0a;
}
.navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */
display: block;
}
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>

How do I hide my dropdown menu?

I am making a website using html, and now I want to make a dropdown menu wich animates down slowly. This is my code:
<html>
<head>
<style type="text/css">
.nav {
background-color: #25AAA0;
position: fixed;
width: 100%;
margin: 0;
padding: 0;
z-index: 1000;
}
.nav_wrapper {
width: 90%;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover {
background-color: #66C3BC;
}
.nav ul li a,visited {
text-decoration: none;
color: white;
padding: 15px;
display: block;
}
.nav ul li a:hover {
padding: 15px;
}
.nav ul #dropdown {
position: absolute;
background-color: black;
top: 0
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li>Vanilla<ul id="dropdown">
<li>Survival</li>
<li>Creative</li>
</ul></li><li>
Modded</li><li>
Servers</li><li>
Help</li>
</ul>
</div>
</div>
</body>
</html>
This is what it looks like.
What needs to happen is that the black part is behind and not in front of the rest of the navigation menu, so I can slide it down using jQuery. Does anyone know how to do this? I already tried something with z-index, but that doesn't work. And please don't tell me how I can animate the sliding down, I'm not asking that, I'm asking how I can put the black stuff behind the rest of the navigation bar.
I hope you react soon.
.nav ul #dropdown {
position: absolute;
background-color: black;
top: 50px;
}
.nav ul > li {position: relative;}
Be careful about relative and absolute positions.
You can animate it with CSS on :hover event or with javascript. I can help you with this if you wants but it's better for you to try first :)
You can hide it with several ways in CSS like display:none; visibility:hidden; or opacity:0; or height:0;
Here is a CSS solution I've made : See this fiddle

Add additional link to responsive navigation

I created a little responsive Navigation which works fine. I also want to add a link on the right side of my navigation for "Account".
My idea was to insert a div into a ul but I think that is not w3c conform.
<div class="navigation">
<ul>
<li>Welcome</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">Account</div>
</ul>
Navigation
Here is a JS Fiddle Demo
Important is that i want the "account" on the right side, not side by side with the other navigation items. Under 700px screen size it should be under the contact li.
Should look like this: http://www.directupload.net/file/d/3718/xneivu5d_png.htm
Sorry for my bad english. I hope you can understand my problem and maybe you have a good idea to solve this.
Your .navigation li{ float: left;} CSS is pulling all <li> elements to the left.
Add the <li> tag for "Account" like so, with a new account class.
<li class="account">Account</li>
And add to your CSS:
.account{
float: right !important;
}
Updated JS Fiddle
Also, you're going to have to adjust your media query width for menu collapse since the account is now appearing on a second line in a small screen width just before the menu collapses.
EDIT:
As what I thought you wanted was incorrect, I've decided to update my answer.
http://jsfiddle.net/AlexCharlton/bb26gau3/3/
<body>
<div class="navigation">
<ul>
<li>Winterhalder</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">
<ul>
<li>Account</li>
</ul>
</div>
</ul>
Navigation
</div>
</body>
CSS:
.account {
float:right;
}
get your .account div OUT of the UL, and then you can style it. Like this:
<div class="navigation">
<ul>
<li>Winterhalder
</li>
<li>Me
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
<div class="account">Account</div> Navigation
</div>
then in CSS add this:
`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
#media screen and (max-width: 960px) {
.navigation {
height: auto;
}
.navigation ul {
width: 100%;
display: block;
height: auto;
}
}
#media screen and (max-width: 560px) {
.navigation {
height: auto;
}
.navigation ul {
display: none;
}
.navigation li {
display: block;
float: none;
width: 100%;
}
.navigation a.pull {
display: block;
background-color: #2C3E50;
width: 100%;
position: relative;
}
.navigation a.pull:after {
display: inline-block;
}
.navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}`
You may need some minor adjustments because I'm not 100% sure if this is what you need, but it will help you to find out how to do it. See fiddle here

Categories