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="#">☰</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
Related
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.
I have a problem with my dropdown menu code, and sign up and sign in button which they are out of the box? I try many ways to code the dropdown menu it still can't solve. Please give me some suggestions on how to code it?
enter image description here
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aunty Grocery</title>
* {
margin: 0px;
padding: 0px;
}
/*Nav-bar top*/
.navigation-bar {
background-color: #fff;
height: 60px;
width: 100%;
box-shadow: 0 2px 5px #000;
}
/*Logo left*/
.logo {
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 10px;
width: 70px;
height: 50px;
float: left;
}
/*Nav-menu in Center*/
.navigation-bar ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/*padding to move their position*/
padding: 22px 150px 22px 0px;
}
.navigation-bar li {
display: inline;
margin: 0px 4px 0px 4px;
padding: 5px;
}
.navigation-bar li a {
color: #000;
font-size: 14px;
text-decoration: none;
font-family:arvo;
}
/*menu-link to hover*/
.navigation-bar ul li a:hover {
background-color: #3b9452;
color: #fff;
padding: 26px 20px 21px 20px;
}
/Dropdown Menu/
.Dropdown-menu ul{
Display:none;
}
.Dropdown-menu ul:hover ul {
Display:block;
}
/*account on the right*/
.account-right {
float: right;
position: relative;
border-radius: 5px;
bottom:50px;
text-decoration: none;
background-color:#3b9452;
color:#fff;
padding: 10px 40px 10px 40px;
margin: 0px 5px 0px 5px;
font-family:arvo;
font-size:14px;
}
<nav class="navigation-bar">
<img class="logo" src="Logo.png" alt="Logo" />
<ul class="Dropdown-menu">
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Seafood</li>
<li>Cakes,Biscuits</li>
<li>Others</li>
</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
Sign Up </li>
Sign In </li>
</nav>
Actually your <ul> and <li> tags are not closed correctly. After your links you close </li>, and in the "Grocery" sub-list, the sub-list is not correctly closed, so all the code you have after is considered in the sub-list (so are your buttons).
I had it to work with your CSS and this HTML :
<nav class="navigation-bar">
<img class="logo" src="Logo.png" alt="Logo" />
<ul class="Dropdown-menu">
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Seafood</li>
<li>Cakes,Biscuits</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
Sign Up
Sign In
</nav>
i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>
Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/
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");
});
});
The photo slideshow can't display on google-chrome, but it looks perfect on firefox. The code is here:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxxxxx" />
<meta name="description" content="xxxxxxx, New York" />
<link rel="shortcut icon" href="css/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.mygallery').tn3({
skinDir:"css",
autoplay:true,
width:768,
delay:5000,
skin:"tn3e",
imageClick:"url",
image:{
crop:true,
transitions:[{
type:"blinds",
duration:300
},
{
type:"grid",
duration:160,
gridX:9,
gridY:7,
easing:"easeInCubic",
sort:"circle"
},{
type:"slide",
duration:430,
easing:"easeInOutExpo"
}]
}
});
});
</script>
</head>
<body>
<figure class="logo">
<img src="css/vbccr.jpg" alt="logo" />
</figure>'
<div class="nav_example">
<div class="menu">
<span>'
<ul id="nav">
<li>主页<br />Home
<div class="subs">
<div>
<ul>
<li><h3>关于我们<br />About Us</h3>
<ul>'
<li>陈述</li>
<li>历史沿革</li>
<li>联系我们</li>
</ul>
</li>
<li><h3>冯师<br />Feng</h3>
<ul>'
<li>简介</li>
<li>寄语</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>主拜<br />Sunday
<div class="subs">
<div class="wrp2">
<ul>'
<li><h3>时间地点<br />Time & Location</h3></li>
<li><h3>师道<br />Sermons</h3>
<ul>'
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>人学<br />School</h3>
<ul>'
<li>新班</li>
<li>门班</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
<!-- This is gallery setting -->
<div class="mygallery">
<div class="tn3 album">
<h4>Large Images</h4>
<div class="tn3 description">Large Images</div>
<div class="tn3 thumb">images/114x72/3.jpg</div>
<ol>
<li>
<h4>Hdfae</h4>
<div class="tn3 description">daa</div>
<img src="images/114x72/1.jpg" alt="demo" />
</li>
<li>
<h4>Isolated</h4>
<div class="tn3 description">island</div>
<img src="images/114x72/2.jpg" alt="demo" />
</li>
<li>
<h4>Town</h4>
<div class="tn3 description">Herceg</div>
<img src="images/114x72/3.jpg" alt="demo" />
</li>
</ol>
</div>
<div class="tn3 album">
<h4>Fixed</h4>
<div class="tn3 description">Images</div>
<div class="tn3 thumb">images/114x72/1.jpg</div>
<ol>
<li>
<h4>Wall</h4>
<div class="tn3 description">Jai</div>
<img src="images/114x72/6.jpg" alt="demo" />
</li>
<li>
<h4>City</h4>
<div class="tn3 description">Ne</div>
<img src="images/114x72/7.jpg" alt="demo" />
</li>
</ol>
</div>
</div>
</body>
</html>
tn3e.css:
#charset "utf-8";
.tn3e-gallery {
position:relative;
width: 960px;
height: 550px;
background-color:#c5c5c5;
background-image: url('grad.jpg');
background-position:center center;
background-repeat:no-repeat;
line-height: normal;
}
.tn3e-image {
position:absolute;
left: 20px;
top: 20px;
width: 920px;
height: 360px;
background-color: #000000;
}
/*
.tn3e-full-image {
box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-webkit-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-moz-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
}
*/
.tn3e-control-bar {
position:absolute;
background: url('bg.png') repeat;
width:243px;
height:80px;
}
.tn3e-thumbs ul, .tn3e-thumbs li {
margin: 0;
}
.tn3e-thumbs {
position:absolute;
width:920px;
height:80px;
bottom:20px;
left:20px;
background-image: url('thumb_bg.png');
background-repeat:repeat-x;
padding-top:2px;
}
.tn3e-thumb {
padding: 2px;
cursor:pointer;
}
.tn3e-thumb-selected {
cursor:default;
}
.tn3e-thumb img {
width: 114px;
height:72px;
}
.tn3e-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-20px -3px;
width: 13px;
height: 17px;
right:33px;
bottom:126px;
cursor:pointer;
}
.tn3e-next:hover {
background-position:-20px -23px;
}
.tn3e-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -3px;
width: 13px;
height: 17px;
left:30px;
bottom:126px;
cursor:pointer;
}
.tn3e-prev:hover {
background-position:-2px -23px;
}
.tn3e-preloader {
position:absolute;
width: 22px;
height: 8px;
right:5px;
top:5px;
}
.tn3e-text {
position: absolute;
left: 64px;
bottom: 110px;
width: 832px;
height: 40px;
vertical-align:middle;
overflow: hidden;
}
.tn3e-image-title {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
font-size:12px;
width:100%;
text-align:center;
font-weight:bold;
}
.tn3e-image-description {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
width:100%;
text-align:center;
font-size:10px;
}
.tn3e-timer {
position:absolute;
width: 100%;
height: 4px;
bottom: 0px;
background: url('bg.png') repeat;
background: rgba(0, 0, 0, 0.3);
}
.tn3e-play {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -80px;
left:94px;
top:12px;
width:57px;
height:57px;
cursor:pointer;
}
.tn3e-play:hover {
background-position:-64px -80px;
}
.tn3e-play-active {
background-position:-2px -139px;
}
.tn3e-play-active:hover {
background-position:-64px -139px;
}
.tn3e-show-albums {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -39px;
top:22px;
left:23px;
width:37px;
height:36px;
padding:0;
margin:0;
cursor:pointer;
}
.tn3e-show-albums:hover {
background-position:-76px -39px;
}
.tn3e-fullscreen {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -1px;
top:22px;
right:23px;
width:37px;
height:36px;
cursor:pointer;
}
.tn3e-fullscreen:hover {
background-position:-76px -1px;
}
.tn3e-albums {
position:absolute;
width: 920px;
height: 510px;
left:20px;
top:20px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
background-image:url('bg.png');
background: rgba(0, 0, 0, 0.8);
}
.tn3e-albums h4 {
position: absolute;
margin-top: 1.33em;
font-weight: bold;
left: 34px;
top: 10px;
font-size: 18px;
color: #c7c8c9;
}
.tn3e-inalbums {
position:absolute;
top: 80px;
width: 920px;
height: 350px;
padding: 20px;
}
.tn3e-album {
position:absolute;
width: 420px;
height: 66px;
background-color:#111111;
overflow: hidden;
cursor:pointer;
font-size: medium;
}
.tn3e-album-over {
background-color:#222;
}
.tn3e-album-selected {
background-color:#cdcdcd;
color:#111214;
cursor:default;
}
.tn3e-album-image {
height: 100%;
margin-right: 1em;
overflow:hidden;
float: left;
}
.tn3e-album-title {
font-size:13px;
font-weight:bold;
margin-top: 1em;
}
.tn3e-album-description {
font-size:0.6em;
height: 3em;
line-height: 1.6em;
overflow: hidden;
}
.tn3e-albums-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-217px -1px;
width: 97px;
height: 37px;
right:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-next-over {
background-position:-217px -40px;
cursor:pointer;
}
.tn3e-albums-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-117px -1px;
width: 97px;
height: 37px;
left:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-prev-over {
background-position:-117px -40px;
cursor:pointer;
}
.tn3e-albums-close {
position:absolute;
background-image:url('tn3e.png');
background-position:-125px -80px;
width: 27px;
height: 27px;
right:31px;
top:30px;
cursor:pointer;
}
.tn3e-albums-close:hover {
background-position:-155px -80px;
}
/* when javascript is disabled */
.tn3.album, .tn3.album li {
float:left;
list-style-type: none;
margin:4px;
}
.tn3.album div, .tn3.album li h4, .tn3.album li div{
display:none;
}
style.css:
body {
background:white;
margin:0px auto;
padding:0;
width: 768px;
color:#eee;
font-size:medium;
font-family:Tahoma,Arial,Verdana,sans-serif;
}
.logo {
padding:inherit;
margin:inherit;
}
.logo > img {
width: 768px;
display:block;
}
.nav_example {
background:url(navigation_bar.gif) no-repeat;
width:100%;
height:60px;
margin:inherit;
/* border:1px #000 solid; */
/* border-radius:3px; */
/* -moz-border-radius:3px; */
/* -webkit-border-radius:3px; */
}
/* main menu styles */
.menu {
padding-top:9px;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:10 auto;
}
#nav {
display:inline;
text-align:center;
/* text-align:left; */
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
/* border:1px solid transparent; */
color:#eee;
display:block;
font-size:1.05em;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
color:#fefefe;
background-color:#d10e15;
/* border-color:#999 */
}
#nav > li.selected > a {
background-color:#d10e15;
color:#fefefe;
z-index:0;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#1a1a1a;
display:none;
font-size:1em;
margin:0;
padding:0;
position:absolute;
top:5px;
z-index:1;
width:200px;
}
#nav li div div.wrp2 {
width:400px;
}
#nav .sep {
left:200px;
border-left:1px solid #2a2a2a;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:5px;
padding-right:5px;
position:relative;
width:190px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #3a3a3a;
color:#1da0ff;
font-weight:bold;
font-size:0.95em;
margin:8px 0px;
padding:3px 0px;
}
#nav li div ul li h3 a {
color:#1da0ff;
display:block;
text-decoration:none;
}
#nav li div ul li h3 a:hover{
background-color:#d10e15;
color:#fefefe;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#eee;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.95em;
}
#nav li ul ul li a:hover{
background-color:#d10e15;
color:#fefefe;
}
The jquery.min.js is the latest from google. And jquery.tn3.min.js is from:
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/
And by the way, the favicon can't show in google-chrome either, but successfully in firefox. Does anyone have any idea?
try using a css reset http://meyerweb.com/eric/tools/css/reset/, if you provide more information on how the page is behaving would be better