jQuery working in dreamweaver but not in browser

jQuery working in dreamweaver but not in browser - javascript

So, here's my code(not all of it, just what you need to understand):
HTML:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
jQuery(document).ready(function(){
jQuery("nav ul ul").each(function(){
var navWidth=jQuery(this).width();
var liWidth=jQuery(this).closest("li").width();
var gaps=navWidth-liWidth;
var moveLeft=-gaps/2;
jQuery(this).css({"margin-left":moveLeft});
})
})
</script>
</head>
<body>
<header>
<nav>
<ul><li>
ACASA</li><li>
CULTURA
<ul class="align1">
<li>Cultura populară</li>
<li class="border">Cultura cultă</li>
<li class="border">Cultura de masă</li>
</ul>
</li><li>
CULTURA ROMÂNIEI
<ul class="align2">
<li>Elemente dacice</li>
<li class="border">Elemente romane</li>
<li class="border">Alte influențe</li>
</ul>
</li><li>
INTERFERENȚE CULTURALE
<ul class="align3">
<li>Români și romi</li>
<li class="border">Români și maghiari</li>
<li class="border">Români și evrei</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
CSS:
nav {
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
font-family: Krona One;
border-top: 1px solid #fff;
text-decoration: none;
color: #FFFFFF;
font-size: large;
}
nav ul {
list-style-type: none;
position:relative;
}
nav ul li {
display: inline-block;
padding: 25px;
}
nav ul li a {
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:hover {
text-shadow: 0px 0px 20px #FFFFFF;
color: #FFFFFF;
text-decoration: none;
}
nav ul li a:hover + ul{
display: block;
visibility:visible;
}
nav ul ul::before {
background: url(images/menu_corner.gif) no-repeat 0% 0%;
width: 9px;
height: 5px;
display: block;
margin: 0 -5px 0 0;
position: absolute;
top: -5px;
right: 50%;
content: '';
}
nav ul ul {
text-align: center;
font-weight: normal;
display: none;
visibility: hidden;
position: absolute;
background-color: #2E2E2E;
font-family: 'Open Sans', sans-serif;
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
padding-left: 0px;
padding-right: 0px;
margin-top: 30px;
font-size: 16px;
}
nav ul ul li {
display: block;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.border {
border-top: 1px solid #434343;
}
nav ul ul li a:hover {
color: #767676;
text-decoration: none;
text-shadow: 0px 0px 0px;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-style: normal;
font-weight: 400;
background-image: url(http://i.imgur.com/qjincKZ.jpg);
color: #FFFFFF;
margin: 0 0 0 0;
background-size: cover;
}
I don't know why, but the jQuery works only in dreamweaver... In order to work in dreamweaver, I have to download jQuery and add it to the contain folder, but for some pourposes, I pasted a CDN.
If I upload everything to jsfiddle and put the javascript code into the javascript box, it works, but from dreamweaver it doesn't.

Try this
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script>
jQuery(document).ready(function(){
jQuery("nav ul ul").each(function(){
var navWidth=jQuery(this).width();
var liWidth=jQuery(this).closest("li").width();
var gaps=navWidth-liWidth;
var moveLeft=-gaps/2;
jQuery(this).css({"margin-left":moveLeft});
});
});

Create a new document and paste the following inside it:
$(document).ready(function () {
$("nav ul ul").each(function () {
var navWidth = $(this).width();
var liWidth = $(this).closest("li").width();
var gaps = navWidth - liWidth;
var moveLeft = -gaps / 2;
$(this).css({
"margin-left": moveLeft
});
});
});
Next, save it as global.js inside your contain folder and then add the following to the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="contain/global.js"></script>
This should do the trick.
Hope this helps.

Related

Is there any way to add link on before or after class?

I wants to add one additional menu item on this menu with css before/after
I added it with css after class, but is there any way to add link with js or jquery on this newly added after menu ? I don't wants to add this Home menu with html.
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
ul li a::after {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #19799f;
content: attr(data-title);
transition: background 0.3s;
transform: rotateX(-90deg);
transform-origin: 50% 0;
}
ul:before{
content:"Home";
right:0;
padding:10px;
color:#fff;
}
<ul id="main-menu">
<li>Info</li>
<li>About</li>
<li>Contact</li>
</ul>

You can use prepend() as below to achieve this.
$('#main-menu').prepend('<li>Home</li>');
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-menu">
<li>Info</li>
<li>About</li>
<li>Contact</li>
</ul>

jQuery menu not hidden completely

So I have a menu, when you click a button it opens a Lightbox full of links. The Lightbox is supposed to show only when the button is clicked, but unfortunately a small portion (about 183px depending on screen size) shows at the very bottom of the page.
$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
height: 0;
top: 100%;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Is there something I am missing? Not sure why it's there. This is what I have: https://jsfiddle.net/9dftx1vg/1/
I'm pretty sure this is something simple, just can't quite put my finger on it!

Add box-sizing: border-box to the lightbox CSS rule, otherwise the 35% top padding it has are added to the * height: 0* in the "hidden" state.

$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
display: none;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Just add display none to lightbox when closed

This might be the easy one, if you add width:0; on #menu .lightbox.close style rule.
See the Snippet below:
$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
height: 0;
width:0; /*ADD THIS ONE*/
top: 100%;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>

On page load set a certain style to a LI element

I have a page with the following menu:
https://jsfiddle.net/dva4zo8t/
Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load, like so:
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
I also want to set a style to the LI element (a different background color and a red highlighted text) once the page loads. So, when I click on "New Appointment", on the new page, the LI element should look like this:
So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:
$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

I´ve created a fiddle that will make the buttons turn it´s background when pushed.
then you will make to them tu "unpush" when others are pushed.
try this fiddle.
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
EDIT
Anyway, if you want to do it after page is loaded, you can use document.ready:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$("#new").addClass('topmenu-selectedsub');
});
There is the demo:
$( document ).ready(function() {
//JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
$('#new').addClass('topmenu-selectedsub');
$('.topmenu-tab-appointments').show();
});
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$('.topmenu-ul li a').click(function() {
$(this).addClass('topmenu-selectedsub');
});
* {
margin: 0;
padding: 0;
overflow: auto;
}
html,
body {
height: 100%
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
display: block
}
body {
font-size: 1em;
color: #fcfcfc;
background-color: #f8f4eb;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
* HTML5 Sections
*/
.header {
height: 72px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.nav {
position: relative;
height: 52px;
margin: 0;
padding: 0;
overflow: hidden;
}
.main {
position: relative;
min-height: calc(100% - 124px);
background-color: #f8f4eb;
}
.aside {
float: left;
width: 195px;
background-color: #ebddca;
height: 100%;
}
/*
* Top Menu Styles
*/
.topmenu {
background: -webkit-linear-gradient(#858585, #636263);
border-top: 1px solid #656565;
border-bottom: 1px solid #3663ab;
box-shadow: inset 0 1px 0 #a8a8a8;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000
}
.topmenu-header {
height: 4px;
background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%);
border-top: 1px solid #d5cab8
}
.topmenu-subbg {
padding-left: 5px;
left: 0;
width: 100%;
height: 24px;
top: 30px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6
}
.topmenu-ul,
li,
a {
margin: 0;
padding: 0;
cursor: pointer;
}
.topmenu-ul li {
list-style: none
}
a {
text-decoration: none;
color: #000
}
.topmenu-ul > li {
float: left;
display: inline;
list-style: none;
white-space: nowrap;
border-right: 1px solid #414141;
box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1)
}
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
.topmenu-ul > li a:hover {
color: #fff
}
.topmenu-ul li ul li a:hover {
background-color: #f3efe5
}
.topmenu-ul li ul {
font-size: 0;
display: none;
list-style: none;
position: absolute;
top: 27px;
left: -8px;
}
.topmenu-ul li ul li a {
color: #000;
line-height: 24px;
height: 24px;
font-weight: normal;
}
.topmenu-ul li ul li a:hover {
color: red;
}
.topmenu-ul li ul li {
display: inline-block;
list-style: none;
white-space: nowrap;
line-height: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px);
border-bottom: 1px solid #d3c7b6;
border-right: 1px solid #d5ccbe
}
.topmenu-ul > [class*=topmenu-selected] > a {
color: #fff;
}
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedsub {
background-color: #f3efe5
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="topmenu-header"></div>
<div class="topmenu">
<ul class="topmenu-ul">
<li id="bluebutton"><a class="blue">Home</a>
<ul id="topmenu-ul" class="topmenu-tab-home">
<li>Dashboard
</li>
</ul>
</li>
<li id="redbutton"><a class="red">Appointments</a>
<ul id="topmenu-ul" class="topmenu-tab-appointments">
<li>Appointments
</li>
<li><a id="new" href="#">New Appointment</a>
</li>
</ul>
</li>
<li id="greenbutton"><a class="green">Contacts</a>
<ul id="topmenu-ul" class="topmenu-tab-contacts">
<li>Contacts
</li>
<li>New Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>

To do this you would normally use a sever side language to set a class on loading the page (i.e; on the About page add the class about-page to body, or the class current to the about link). But to do it with jQuery only you would need to know the urls of the pages.
$(document).on('ready', function(){
var $links = $('nav a'),
links_array = [],
current_url = window.location.pathname,
current_link_idx;
// we dont have an actual url so we'll pretend here
// for the sake of the snippet/preview
current_url = '/about';
$links.each(function(){
links_array.push($(this).attr('href'));
});
current_link_idx = links_array.indexOf(current_url);
$links.eq(current_link_idx).addClass('current-page');
});
.current-page {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
About
Contact
Etc
</nav>
Obviously, if you have complex nav/urls, this isn't bulletproof. You'll need to do some fiddling with the current_url, maybe splitting it into fragments.
Still, this is best done server side.

See this working Demo
$(".topmenu-ul li").click(function() {
$('li > #topmenu-ul').hide();
$(this).children("ul").toggle();
$(".topmenu-ul li").css("background-color","")
$(this).css("background-color","red")
});
$('[id*="button"]').click(function() {
$('.topmenu-ul li').removeClass();
$(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});
$("#topmenu-ul li a").click(function() {
$("#topmenu-ul li a").css("background-color","")
$(this).css("background-color","red")
});
You can put whatever color you like to add. Its upto you , I have just shown you how to do it

side menu with submenu

i want the menu to have the same effect as this menu from this page http://store.anumberofnames.org/ when someone clicks on the shop link the submenu to drop down and when they click on information the shop link to close and the information submenu to dropdown and also when they click on a category on the sebmenus i want the link that they selected to be highlighted, below is the html and css code i have
html
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>
</div>
css
#menu nav > ul > li > ul {
display: none;
text-align: right;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover{
color: #000;
}

That uses jQuery. You can do it using the two functions: slideDown() and slideUp(), or using a single function: slideToggle():
$(function() {
$("#menu nav > ul > li > ul").hide();
$("#menu nav > ul > li > a").click(function() {
if (!$(this).next("ul").is(":visible")) {
$("#menu nav > ul > li > ul").slideUp();
$(this).next("ul").slideDown();
}
return false;
});
});
#menu nav > ul > li > ul {
margin: 0;
margin-left: 25px;
}
#menu nav a {
display: block;
}
#menu nav > ul > li > a {
display: block;
border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;
}
#menu nav ul li {
font-size: 11px;
list-style-type: none;
text-decoration: none;
color: #ffffff;
line-height: 19px;
}
nav a {
color: rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family: arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;
padding-bottom: 5px;
width: 143px;
padding-top: 5px;
}
#menu nav ul li a:hover {
color: #000;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menu">
<nav>
<ul>
<li>
SHOP
<ul>
<li>T-SHIRT</li>
<li>KNIT</li>
<li>SHIRT</li>
<li>PANTS</li>
<li>ACCESSORY</li>
</ul>
<li>INFORMATION
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWSLETTER</li>
<li>LEGAL</li>
</ul>
</LI>
</ul>
</nav>
</div>

Why does my Horizontal List disappear with this code?

I got this code from JavaScript Kit and it's not working properly... Their site isn't very active so I posted here instead. The list is displaying correctly, however, if I hover over the menu(main menu, submenus, etc) and then hover out, the entire menu disappears. When you hover back over the main menu, it reappears. The rest of the submenus appear correctly. Any ideas?
JS:
var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
HTML:
<div id="navigation">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Rosters
<ul>
<li>Counter-Strike: Source</li>
<li>Team Fortress 2</li>
<li>Black Ops 2</li>
<li>Complete Roster</li>
</ul></li>
<li>Matches
<ul>
<li>Schedule</li>
<li>Results</li>
</ul></li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
#navigation {
background: url(images/navigation_bg.gif) repeat-x;
border-top: #666666;
border-bottom: #333333;
height: 59px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 59px;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 100;
}
#navigation ul li {
position: relative;
display: inline-block;
float: left;
}
#navigation ul li a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li.last a {
display: bock;
width: 160px;
padding: 2px 8px;
border: 0px;
text-decoration: none;
background: url(images/navigation_item_bg.gif) repeat-y left, url(images/navigation_item_bg.gif) repeat-y right;
color: #737373;
font-size: 14px;
font-weight: bold;
}
#navigation ul li ul {
top: 0;
left: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
zIndex: 100;
}
#navigation ul li ul li {
display: inline;
float: none;
margin: 0px;
padding: 0px;
}
#navigation ul li ul li a {
width: 175px;
font-weight: bold;
text-decoration: none;
background: #000;
border-width: 0px 1px;
padding: 0px 5px;
display: block;
}
#navigation ul li ul li a:hover {
background: #333333;
}

That script needs to exclude the topmost div and ul of the menu from hiding:
if (this !== ultags[0].parentNode) {
this.style.zIndex = 0;
this.getElementsByTagName("ul")[0].style.visibility = "hidden";
this.getElementsByTagName("ul")[0].style.zIndex = 100;
}
jsfiddle

We Keep Coding

JavaScript is the programming language of the Web.

jQuery working in dreamweaver but not in browser - javascript

Related

Is there any way to add link on before or after class?

jQuery menu not hidden completely

On page load set a certain style to a LI element

side menu with submenu

Why does my Horizontal List disappear with this code?

Categories

Resources