Change Text on Open and Close of menu - javascript

Currently my navigation bar text is Menu, and when it is clicked I want Menu to change to Close, and when menu is closed it should go back to saying Menu
Here is my Current Code - On click it does change to 'Close' but doesn't change back:
jQuery(document).ready(function() {
jQuery(".menu-Trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-Expanded").css("display", "");
});
$(".menu-Trigger").html("Close");
});
});
HTML and CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-image: url(Final6Lower.jpg);
background-size: auto 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.nav-menu li, .nav-menu a{
display: inline-flex;
color: rgb(137, 134, 134);
text-decoration: none;
font-family: Raleway;
padding-right: 15px;
font-size: 12px;
letter-spacing: 7px;
}
.nav-menu {
margin-top: 25px;
text-align: center;
}
.nav-menu li, .nav-menu a:hover {
color:white;
}
.socialIcons img {
height: 50px;
width: 50px;
opacity: 0.4;
filter: alpha(opacity=40);
margin-right: 10px;
}
icons img {
position:relative;
display: inline;
margin-right: 0 auto;
margin-left: 0 auto;
}
.icons {
text-align: center;
position:absolute;
bottom:10px;
left:0;
width: 100%;
}
.socialIcons img:hover {
opacity:1;
color:white;
}
.menu-Trigger {
display:none;
}
div.nav-menu ul {
margin:0;
padding:0;
}
div.nav-menu ul li {
list-style: none;
}
#media screen and (max-width: 600px) {
.menu-Trigger {
display: block;
color:white;
background-color: black;
padding:10px;
text-align: center;
cursor:pointer;
font-family: raleway;
}
div.nav-menu ul li {
display:block;
float:none;
padding:8px;
background-color: black;
}
div.nav-menu {
display:none;
}
div.nav-Expanded {
display: block;
}
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >Menu</span>
<div class="nav-menu">
<ul>
<li><a href=#>HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a>
</div>
</body>
</html>

I think you are simply missing the if expression checking whether your menu is expanded or not. Not sure about your html, but this might work:
jQuery(document).ready(function() {
jQuery(".menu-Trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-Expanded").css("display", "");
});
if (jQuery(this).hasClass("nav-Expanded"))
$(".menu-Trigger").html("Close");
else
$(".menu-Trigger").html("Menu");
});
});

Related

Link does not stay open and active

i have created a navigation that navigates back and forth between sections. I have styled two lists that are supposed to fulfill this task.
List: the active link works there as soon as I click a link. The text and the point are unfortunately upside down. When I change the order, the list name / Nav remains in the visible area
List: there the point and the name are arranged correctly but the active link cannot be combined somehow.
In both examples, the active link does not remain open. I've been trying it out for a long time and I'm a bit overwhelmed.
$('#menu li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:rgba(255,255,255,.5);
border-right:1px solid #e5e5e5;
position:fixed;
top:0;
bottom:0;
height:100%;
right:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#999;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.active{
background-color:#f30;
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="nav" class="area"></div><nav class="main-menu">
<ul id="menu">
<li class="active">
<a href="#slide01" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 1
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide02" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 2
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide03" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 3
</span>
</a>
</ul>
</nav>
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
</body>
</html>
h2 {
text-align: center;
font-size: 3em !important;
}
#nav {
position: fixed;
height: 100%;
right: 0;
z-index: 1;
top: 0;
background: rgba(255, 255, 255, .5);
padding: 5px;
box-shadow: 0 0 6px #555;
}
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
.list-group-item a, .list-group-item a:hover {
color: #fff;
text-decoration: none;
}
.inner {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.inner a, .inner a:hover {
color: #fff;
text-decoration: none;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
.test {
padding: 0 15px !important;
}
.test:hover .later {
display: block;
text-align: right;
}
.test:hover .before {
display: none;
}
.test .later {
display: none;
z-index: 100;
}
.test .before {
display: block;
z-index: 50;
text-align: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
<section id="slide04">Section 4</section>
<section id="slide05">Section 5</section>
<nav id="nav">
<div class="inner">
<ul class="list-group">
<li class="list-group-item"><a href="#slide01">
<div class="test"><span class="before"> •</span><span class="later">Nav 1 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide02">
<div class="test"><span class="before"> •</span><span class="later">Nav 2 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide03">
<div class="test"><span class="before"> •</span><span class="later">Nav 3 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide04">
<div class="test"><span class="before"> •</span><span class="later">Nav 4 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide05">
<div class="test"><span class="before"> •</span><span class="later">Nav 5 •</span></a></div>
</li>
</ul>
</div>
</nav>
-> Active status
The second example does not have an element with ID "menu," so your JavaScript isn't targeting anything. For the second example specifically:
Change your jQuery to
$('.list-group-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
This will properly apply the "active" class to your list-group-item when clicked.
However, the other issue is that ".active" won't do anything right now because you are overriding Bootstrap's built-in styles with this rule:
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
The !important on background-color is keeping the color the same even when ".active" is applied.
Instead of using !important, you could increase the specificity of your rule by writing it like so:
.list-group .list-group-item {
background-color: rgba(0,0,0,0);
border: none !important;
font-size: 2em;
}
However I'm not sure what you mean by "In both examples, the active link does not remain open." Your ".active" class currently only applies a background color to the active link (both in the way you've written it in example 1 and the way Bootstrap styles it in example 2) and this is what we fixed with the code above. If you want more styling applied to the active link, it will need to be added.

Menu Toggle function is not working on eccomerce site

Hi I've been trying to troubleshoot this on my own but I already spent too many hours trying to figure it out. I couldn't add the images because idk how to on here but if someone could help me please. Or at least guide me in the right direction. My main.js is in a folder called js. My styles.css and html don't have folders but they seem to be working fine cause I know that matters as well.
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gucci</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;800&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
</div>
The problem with your toggle function is that you're setting the height to 0px every time you toggle
You need to remove this line:
MenuItems.style.maxHeight = "0px";
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">

Overlay when click on menu (and remove border)

my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}

Aligning <li> in <div> in <body> all to be centered?

jsut a quick question.
I am having trouble figuring out how to align the gallery icons into the centre of the screen. As you can see from the code snippet it is misaligned. Just to illustrate what I mean you can take a look at this:
Anyone able to point me in the right direction?
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>
Try setting these properties to the ul element:
padding: 0;
text-align: center;
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
padding: 0;
text-align: center;
list-style-type: none; /* hiding the bullets from ul */
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>
add
text-align: center;
padding: 0;
to the ul
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #FFF6E5;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* MENU */
#item {
float: left;
width: 30%;
margin: 5px;
}
#item img {
width: 100%;
}
#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>
<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}
a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}
ul {
list-style-type: none; /* hiding the bullets from ul */
text-align: center;
padding: 0;
}
.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
<footer></footer>
</html>

Creating A Responsive Menu with HTML, CSS & jQuery

I'm making a responsive menu following this guide http://demos.inspirationalpixels.com/responsive-menu/ everything's working fine when the width is less than 980px, the menu (the three dash) is showing but not opening.
What am I doing wrong? Can anyone tell me?
It's not working on my website:
Here's my HTML Code
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0;
padding: 0;
background-image: url("img-bg-mobile.jpg");
background-repeat: no-repeat;
font-family: open sans;
}
.toggle-nav {
display: none;
}
#media screen and (min-width: 1000px) {
nav {
height: auto;
width:auto;
margin-left:17%;
}
nav ul{
list-style: none;
margin:0px;
padding:0px;
}
nav ul li {
float: left;
margin: 2%;
}
nav ul li a{
transition:all linear 0.15s;
text-decoration: none;
font-family: open sans;
color: white;
font-size: 1.5em;
text-align: center;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
}
nav ul li ul a {
color: #ff3c1f;
}
nav ul li:hover ul
{
display:block;
height:auto;
width: 110px;
position:absolute;
margin:0;
}
}
#media screen and (max-width: 980px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul.active {
display:none;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
article {
clear: both;
font-family: open sans;
font-size: 1em;
}
article p {
color: white;
margin-left: 10%;
margin-right: 10%;
}
footer {
color: white;
margin-left: 10%;
margin-right: 10%;
}
.arrow {
font-size: 11px;
margin-left: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0">
<title>Yoo Get Free Recharge</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header start from here-->
<header>
<nav class="menu">
<ul class="active">
<li class=logo>
<img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge">
</li>
<li class="mainmenu">
HOME
</li>
<li class="mainmenu">
ADVERTISE
</li>
<li id="mainmenu" class="sub-menu">
WHO WE ARE<span class="arrow">▼</span>
<ul>
<li>About Us</li>
<li>Vision</li>
<li>Team</li>
</ul>
</li>
<li class="mainmenu">
PRICING
</li>
<li class="mainmenu">
CONTACT
</li>
</ul>
<a class="toggle-nav" href="#">&#9776</a>
</nav>
</header>
<article>
<p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend Download Now</p>
</article>
<footer>
<div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You left this out of your css
#media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}
You can use some framework like bootstrap or material design
http://getbootstrap.com/components/#navbar-default
http://www.getmdl.io/components/index.html#layout-section
I followed this tutorial and made my responsive header menu
Here it is

Categories

Resources