making a dropdown menu using javascript - javascript

I am trying to create a dropdown menu for "My Journeys" in the navigation bar using javascript, and I am using flex for the css. And I have no idea what to do, all of the tutorials I've watched didn't use flex for the code. Thank you for your help!
This is my html body code
<body>
<script src="script.js" type="text/javascript"></script>
<div class="pagewrap">
<header>
<img alt= "header" src = "pict/header.jpg">
</header>
<nav>
<ul>
<li> Home </li>
<div id="dropdown">
<li> My Journeys</li>
</div>
<li> Media </li>
<li> About Me & This Blog </li>
</ul>
<form>
<input type="search" placeholder="search...">
<input type="image" src="pict/search-white.png" alt="search">
</form>
</nav>
</div>
</body>
and this is my css code
.pagewrap{
display: flex;
flex-direction: column;
background-color: blue;
width: 75%;
margin: 0 auto;
background-color: black;
}
body{
background-image: url(pict/wallpaper.jpeg);
}
header img{
width: 100%;
margin-top: 4%;
}
nav{
display: flex;
flex-direction: row;
order: -1;
height: 8%;
width: 75%;
top: 0;
background-color: black;
opacity: 0.9;
align-items: center;
position: fixed;
}
nav ul{
display: flex;
flex-grow: 1;
}
nav ul li, #dropdown{
list-style: none;
flex-grow: 1;
margin: 0 2%;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover{
color: #660066;
}
form{
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"]{
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"]{
margin: auto 2%;
width: 5%;
}

what i have made up from your question is you need my journey drop down with two submenus. Below is the code for same.
Hope it will help.
$('.dropdown').click(function(){ $('.myList').slideToggle(100);});
body {
margin:0;
padding:0;
}
.pagewrap {
background-color: blue;
width: 100%;
background-color: black;
}
body {
background-image: url(pict/wallpaper.jpeg);
}
header img {
width: 100%;
margin-top: 4%;
}
nav {
width:100%;
top: 0;
background-color: black;
position: fixed;
padding:5px;
}
nav ul {
flex-grow: 1;
margin:0;
padding:0;
}
nav ul li, #dropdown {
list-style: none;
display:inline;
margin-right:10px;
}
nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family:'Candal', sans-serif;
font-size: 100%;
}
nav ul li a:hover {
color: #F99D9D;
}
form {
flex-direction: row-reverse;
justify-content: flex-start;
width: 20%;
height: 50%;
}
form input[type="search"] {
border-width: 0;
color: white;
background-color: transparent;
}
form input[type="image"] {
margin: auto 2%;
width: 5%;
}
.myList {
position:absolute;
top:24px;
left:0;
background:#A0A0A0;
width:100px;
z-index:1
}
.myList li {
margin:0;
}
.dropdown {
position:relative;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagewrap">
<nav>
<ul>
<li> Home
</li>
<li class="dropdown"> My Journeys
<ul class="myList" style="display:none;">
<li> menu 1
</li>
<li> menu 2
</li>
</ul>
</li>
<li> Media
</li>
<li> About Me & This Blog
</li>
</ul>
</nav>
</div>

Related

Nav-bar toggle matters

I would like to know that how can I create a responsive nav-bar using jquery.
This javascript is to toggle the animation of the nav-bar, but not the nav-links. How can I do that? i want to know does the menu dropdown when the #nav-icon1 is being toggled instead of just animation.
Js
$(document).ready(function(){
$('#nav-icon1').click(function(){
$(this).toggleClass('open');
});
});
Html
<header>
<img src="images/logo/logo.svg" alt="" width="250px">
<nav>
<ul class="nav-links open">
<li><a href="index.html" class="a1" >Explore</a></li>
<li><a href="index.html" class="a1" >About</a></li>
<li><a href="index.html" class="a1" >Pricing</a></li>
<li><a href="index.html" class="a1" >Login</a></li>
<li id="line-1">
<div class="line"></div>
</li>
<li><a href="index.html" class="register">
<button>Register</button>
</a></li>
</ul>
</nav>
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
</header>
Css
#media (max-width: 1200px) {
header {
flex-direction: column;
}
#line-1{
padding: 0;
}
.line{
display: none;
}
.logo{
padding-bottom: 30px;
}
nav ul {
flex-direction: column;
width: 100%;
align-items: center;
}
.nav-links{
display: none;
width: 100%;
}
nav ul li a{
padding: 50px;
font-size: 35px;
}
.nav-links li .a1:hover {
background-color: white;
border: none;
color: black;
font-size: 50px;
overflow: hidden;
padding: 10px 25px 40px;
}
.register button{
font-size: 25px;
border-radius: 45px;
padding: 15px 30px;
margin-left: 5px;
}
.open{
display: flex;
}
}
I'm a little bit confused about your question. I supposedly believe that you want something like this.
Or try this on Codepen that I've created https://codepen.io/Preygremmer15/pen/LYLbdmq
$(document).ready(function(){
$('#nav-icon1').click(function(){
//target myNav id to toggle class 'open'
$("#myNav").toggleClass('open');
});
});
body {
font-family: Lato;
background-color: #f5f5f5;
margin: 0;
}
header {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 60px;
background-color: grey;
}
header img {
padding: 0 10px;
height: 40px;
object-fit: cover;
}
#nav-icon1 {
position: absolute;
right: 15px;
display: none;
align-items: center;
justify-content: center;
font-size: 20px;
height: 40px;
}
#nav-icon1:hover {
cursor: pointer;
}
#nav-icon1 span {
height: 6px;
}
#myNav ul {
display: flex;
gap: 10px;
}
#myNav ul li {
list-style: none;
}
#myNav ul li a {
text-decoration: none;
color: #fff;
}
.open {
display: flex !important;
width: 200px;
}
#media (max-width: 1200px) {
#nav-icon1 {
display: flex;
}
#myNav {
display: none;
position: absolute;
background-color: white;
top: 60px;
right: 0;
height: auto;
width: 200px;
}
#myNav ul {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 100%;
height: 100%;
padding: 15px 15px;
}
#myNav ul li a {
color: #000;
font-size: 20px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a href="index.html" class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png" alt="">
</a>
<nav id="myNav">
<ul class="nav-links">
<li><a href="index.html" class="a1" >Explore</a></li>
<li><a href="index.html" class="a1" >About</a></li>
<li><a href="index.html" class="a1" >Pricing</a></li>
<li><a href="index.html" class="a1" >Login</a></li>
<li id="line-1">
<div class="line"></div>
</li>
<li><a href="index.html" class="register">
<button>Register</button>
</a></li>
</ul>
</nav>
<div id="nav-icon1">
<i class="fa fa-bars"></i>
<!--<span>-</span>
<span>-</span>
<span>-</span>-->
</div>
</header>

Items are going out of container even with using percentages in width?

I have created a header with two items a site title and a navbar. And header is created by using the percentage units so the items would work according to the width of the screen but When I am decreasing the width of the screen the navbar is going out of the container even though by using percentages. I surfed the internet to find my answer and there are many similar questions on StackOverflow like that but no of them is working on my issue.
So can anyone tell me why it's happening and how to fix this?
Here is my code
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
position:absolute;
}
/* html{
border:5px solid blue;
} */
*,::before,::after{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family:sans-serif ;
}
.container{
width:100%;
}
.header{
width:100%;
padding:.5em .5em;
}
.header-wrapper{
display:flex;
align-items: center;
justify-content:space-between;
padding:.8em 0em;
width:90%;
margin:auto;
}
.site-title{
margin-left: 2em;
font-size:2.3em;
font-weight:400;
}
.site-title-span{
font-weight:750;
color:#E47700;
}
.nav{
margin-right:2%;
width:45%;
font: size 1em;;
}
.nav ul{
display: flex;
list-style: none;
font-size:1.5em;
justify-content: space-between;
}
.nav ul li{
margin-right:12%;
}
.nav ul li a {
text-decoration: none;
color:black;
font-weight: 500;
padding:6px;
}
.nav ul li a:hover{
color:white;
background:#FEBD33;
border-radius:50px;
transition: .3s all ease;
}
.active{
border-radius:50px;
background-color: #FEBD33;
color: white;
padding:0 12px;
}
<div class="header">
<!--header open-->
<div class="header-wrapper">
<div class="site-title">
<p>
<span class="site-title-span">B</span>ee
<span class="site-title-span">B</span>uzz
</p>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<!--header closed-->
Your code currently sets a 45% width for the nav, and that's not enough for all .nav ul li which has its own content width plus that extra 12% margin-right. Also, nav ul has flex's default wrap value set to no-wrap and so the content will always exceed the header width as well as not wrapping at all.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
position: absolute;
}
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
width: 100%;
}
.header {
width: 100%;
padding: .5em .5em;
}
.header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: .8em 0em;
width: 90%;
margin: auto;
}
.site-title {
margin-left: 2em;
font-size: 2.3em;
font-weight: 400;
}
.site-title-span {
font-weight: 750;
color: #E47700;
}
.nav {
margin-right: 2%;
/* I don't think you need this, either remove it or give a bigger value, so you
nav won't wrap even when there's enough space */
/* width: 45%; */
font: size 1em;
}
.nav ul {
display: flex;
list-style: none;
font-size: 1.5em;
justify-content: space-between;
/* Add this line so the nav item can wrap when needed */
flex-wrap: wrap;
}
.nav ul li {
/* margin-right: 12%; */
/* Use a smaller margin here */
margin-right: 1rem
}
.nav ul li a {
text-decoration: none;
color: black;
font-weight: 500;
padding: 6px;
}
.nav ul li a:hover {
color: white;
background: #FEBD33;
border-radius: 50px;
transition: .3s all ease;
}
.active {
border-radius: 50px;
background-color: #FEBD33;
color: white;
padding: 0 12px;
}
<div class="header">
<!--header open-->
<div class="header-wrapper">
<div class="site-title">
<p>
<span class="site-title-span">B</span>ee
<span class="site-title-span">B</span>uzz
</p>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<!--header closed-->

Burger menu doesn't display with CSS, JS and HTML

I ran into a problem displaying a burger menu for my website. I wanted it to appear on the top right corner but somehow the menu is invisible right now.
I leave my source codes so I appreciate it if any of you could advise me on this.
$(document).ready(function(){
$(".burger").on("click", function(){
$("nav li").toggleClass("open");
});
});
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background: pink;
color: pink;
List-style: none;
clear: both;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Header -->
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li><img class="icon" src="./resources/images/instagram (1.png"></li>
<li><img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;"></li>
</ul>
</nav>
<nav class="mobile">
<!-- Navigation Burger-->
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div>
<br>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</nav>
</div>
</header>
There's two issues in your code. Firstly the rules in the <1000px media query don't override the default display: none setting of the header .mobile element. Secondly you're applying the styling for the lines of the burger icon to the .burger div directly, instead of this child div within it. If you fix the following two issues, the code works correctly:
#media only screen and (max-width: 1000px) {
header .mobile {
/* other rules... */
background-color: transparent;
display: block;
}
/* OLD: header .mobile .burger { */
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
Working example:
/* Header */
header {
position: fixed;
z-index: 100;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .site-logo {
flex: 1;
width: 60%
}
header nav ul {
display: flex;
}
ul {
list-style-type: none;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav li {
padding-left: 3.5rem;
}
nav li:last-child {
display: flex;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #de6cb6;
}
nav a:link {
color: red;
}
nav select {
display: none;
}
a:-webkit-any-link {
cursor: pointer;
}
header .icon {
width: 1rem;
padding-left: .75rem;
color: #de6cb6
}
header .mobile {
display: none;
}
#media only screen and (max-width: 1200px) {
nav li:last-child {
display: block;
}
header .content {
padding: 1rem 1rem;
}
}
#media only screen and (max-width: 1000px) {
header {
float: none;
}
header .desktop {
display: none;
}
header .mobile {
background-color: transparent;
color: pink;
List-style: none;
clear: both;
display: block;
}
header .mobile li {
display: inline-block;
margin: 10px;
}
header .mobile .burger div {
width: 35px;
height: 5px;
background: pink;
margin: 6px 0;
}
#burger {
float: right;
visibility: visible;
margin: 5px;
}
header .content {
padding: .5rem 0;
}
}
<header>
<div class="content" style="height: 60px;">
<img src="./resources/images/cropped_springtribelogo_notagline.png" style="height:60px;">
<nav class="desktop">
<ul>
<li>Impressum</li>
<li>EN</li>
<li>
<img class="icon" src="./resources/images/instagram (1.png">
</li>
<li>
<img class="Linkedin" src="./resources/images/Linkedin_saturated_4.png" style="width: 20px; color: #de6cb6; margin-left: 8px;">
</li>
</ul>
</nav>
<nav class="mobile">
<div id="burger" class="burger">
<div></div>
<div></div>
<div></div>
</div><br>
<ul>
<li>Home</li>
<li>About</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</nav>
</div>
</header>
As an aside, note that your HTML isn't valid as the li elements need to be children of a ul

Dropdown menu box size

I have a question about the dropdown menu size. If the title in the dropdown is long, it moves to the bottom line. I want it to increase the width of the Dropdown menu size. How can I do that. Below you can find the photo of the dropdown menu and the corresponding codes.Thanks for your answers.
Dropdown Menu
HTML
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Drop-down Menu Bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
CodingNepal</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design and some information</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<header>Responsive Drop-down Menu Bar</header>
<p>
HTML and CSS (Media Query)</p>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}
Put those two styles on your code. the reason for your issue is not specify the width of inner list.
nav ul li ul {
width: fit-content;
}
nav ul li ul li {
width: 100%;
display: block;
}
in your stylesheet there is some bad practices without defining any class names for your styles. it is hard to find when add more styles. you can use ids or classes and tones of ways to make it easy.

Javascript working in JSfiddle but not in Chrome or IE

I added some javascript to animate the login to appear while sliding in the picture.
I tried the code in JS Fiddle and it works like a charm, but if I copy-paste the code to Chrome or Internet Explorer, nothing happens.
Javascript is enabled on both the browsers.
HTML:
Homepage
<body>
<header>
<div class="Header">
<nav id="navi">
<img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
<img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>
<ul>
<li> <a class="navlinks" href="#">Home</a> </li>
<li> <a class="navlinks" href="#">About us</a> </li>
<li> <a class="navlinks" href="#">Our Services</a> </li>
<li class="last" id="login"> Login
<div class="dummy">
<ul>
<li class="loginform"> <form method="post" action="">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</li>
</ul>
</div>
</li>
</ul>
</li>
</nav>
</div>
</header>
</body>
</html>
CSS:
#import 'https://fonts.googleapis.com/css?family=Montserrat';
#import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
body {
margin: 0;
background: #808080 ;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
color: #fff;
}
.show {
display: none;
}
.logo{
width: 200px;
height: 100px;
z-index: 11;
margin-left: -100px;
}
.menu-icon {
padding: 25px 0 0 10px;
display: none;
width: 100px;
height: 100px;
float: left;
z-index: 14;
}
#navi {
width: 100%;
position: fixed;
z-index: 10;
top: 0;
text-align: center;
background: rgba(0,0,0,0.7);
}
nav :hover {
background: #2CB4AC;
transition: background 0.6s ease-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline;
}
nav > ul > li > a {
padding: 15px 70px;
margin: 0 -3px;
display: inline-block;
color: white;
font-size: 1.2em;
font-style: bold;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.navlinks {
border-left: 3px solid rgba(255,255,255,0.3);
}
nav li a:hover {
color: black;
border-color: #2CB4AC;
}
nav li a:active {
transform: translateY(1px);
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:active > ul {
display: block;
align: center;
}
.last a{
border-right: 3px solid rgba(255,255,255,0.3);
border-left: 3px solid rgba(255,255,255,0.3);
}
.logo {
width: 200px;
height: 100px;
background: url('C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png') no-repeat;
}
#media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: fixed;
background: rgba(0,0,0,0.7);
border: none;
}
#navi li a:first-child {
border-left: none;
}
.menu-icon {
display: inline-block;
background: rgba(0,0,0,0);
}
#last a{
border-right: none;
}
nav li {
font-size: 2.5em;
text-align: center;
width: 100%;
margin: 0;
display: block;
}
nav:hover ul {
display: block;
}
.logo{
width: 300px;
height: 150px;
z-index: 11;
margin-left: -100px;
}
#navi :hover {
background: #2CB4AC;
transition: background 0.4s ease-out;
}
And the Javascript:
$(".last").on('click', function() {
$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
Here's the Fiddle. Please click the login button and it will change its position.
https://jsfiddle.net/5vs30x6f/
You miss this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(".last").on('click', function() {
$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
#import 'https://fonts.googleapis.com/css?family=Montserrat';
#import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
body {
margin: 0;
background: #808080 ;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
color: #fff;
}
.show {
display: none;
}
.logo{
width: 200px;
height: 100px;
z-index: 11;
margin-left: -100px;
}
.menu-icon {
padding: 25px 0 0 10px;
display: none;
width: 100px;
height: 100px;
float: left;
z-index: 14;
}
#navi {
width: 100%;
position: fixed;
z-index: 10;
top: 0;
text-align: center;
background: rgba(0,0,0,0.7);
}
nav :hover {
background: #2CB4AC;
transition: background 0.6s ease-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline;
}
nav > ul > li > a {
padding: 15px 70px;
margin: 0 -3px;
display: inline-block;
color: white;
font-size: 1.2em;
font-style: bold;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.navlinks {
border-left: 3px solid rgba(255,255,255,0.3);
}
nav li a:hover {
color: black;
border-color: #2CB4AC;
}
nav li a:active {
transform: translateY(1px);
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:active > ul {
display: block;
align: center;
}
.last a{
border-right: 3px solid rgba(255,255,255,0.3);
border-left: 3px solid rgba(255,255,255,0.3);
}
.logo {
width: 200px;
height: 100px;
background: url('C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png') no-repeat;
}
#media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: fixed;
background: rgba(0,0,0,0.7);
border: none;
}
#navi li a:first-child {
border-left: none;
}
.menu-icon {
display: inline-block;
background: rgba(0,0,0,0);
}
#last a{
border-right: none;
}
nav li {
font-size: 2.5em;
text-align: center;
width: 100%;
margin: 0;
display: block;
}
nav:hover ul {
display: block;
}
.logo{
width: 300px;
height: 150px;
z-index: 11;
margin-left: -100px;
}
#navi :hover {
background: #2CB4AC;
transition: background 0.4s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="Header">
<nav id="navi">
<img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
<img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>
<ul>
<li> <a class="navlinks" href="#">Home</a> </li>
<li> <a class="navlinks" href="#">About us</a> </li>
<li> <a class="navlinks" href="#">Our Services</a> </li>
<li class="last" id="login"> Login
<div class="dummy">
<ul>
<li class="loginform"> <form method="post" action="">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</li>
</ul>
</div>
</li>
</ul>
</li>
</nav>
</div>
</header>
You have to wrap your jQuery code in
$( document ).ready(function() {
// Your code goes here
});
You can read more here. In general the script can be run as soon as the DOM hierarchy has been fully constructed
So your code will be:
$( document ).ready(function() {
$(".last").on('click', function() {
$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
});
and add jQuery in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I am pretty sure you forgot to add window.onload listener because this is the only difference between executing code using JSFiddle and pure Javascript, because JSFiddle automatically execute your code when jQuery is load. You should do something like this:
window.addEventListener('load', function(){
// Your code
});
Or you can use jQuery:
$(document).ready(function(){
// Your code
});

Categories