Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
My menu is working on hover.
When I hover first level, it shows the second level menu.
I would like to change this so that when I click first level, it shows the second level and it stays visible.
This is my code on jsfiddle
<ul class="mainNav">
<li>Cours collectifs
<ul class="dropDown">
<li>RPM</li>
<li>Bodypump</li>
<li>Bodyattack</li>
<li>Bodycombat</li>
<li>Bodyjam</li>
<li>Bodybalance</li>
<li>Cxworx</li>
</ul>
</li>
</ul>
$(function () {
var url = window.location.pathname;
var urlRegExp = new RegExp(url.replace(/\/$/, ''));
$('.mainNav li a').each(function () {
// and test its href against the url pathname regexp
if (urlRegExp.test(this.href)) {
$(this).addClass('active');
$(this).closest('.mainNav>li').children('a').addClass("active");
}
});
});
$("ul.mainNav li").hover(function () {
$(this).find("ul.dropDown").css({ "display": "block" }).fadeTo('500', '1.0');
}, function () {
$(this).find("ul.dropDown").fadeTo('200', '0.0').css({ "display": "none" });
});
My css
#import url(http://fonts.googleapis.com/css?family=Raleway:600,800);
ul.mainNav {
margin:0;
padding:0;
list-style-type:none;
background-color: #f0eff0;
height: 28px;
font-family: 'Raleway', sans-serif;
color: #606060;
float: right;
margin-right: 100px;
}
.menu-wrapper{
background-color: #f0eff0;
height: 3.4em;
}
.mainNav li {
margin:0;
padding:0;
list-style-type:none;
height: 28px;
line-height:28px;
float: left;
color: #606060;
font-size: 14px;
}
.mainNav li a {
padding: 0 20px;
line-height: 3.8em;
display:block;
color: #606060;
text-decoration:none;
font-family: 'Raleway', sans-serif;
font-weight: 800;
text-transform: uppercase;
}
.mainNav li:hover > a {
color: #ffc102;
}
.mainNav li a:hover{
color: #ffc102;
}
.mainNav li ul.dropDown {
margin:0;
padding:0;
position: absolute;
display: none;
background: #fff;
opacity: 0.0;
height: 3em;
}
.mainNav li ul.dropDown li {
float: left;
height: 28px;
line-height: 28px;
margin: 0;
padding: 0;
font-size: 12px;
color: #606060;
/*font-weight: normal;*/
}
.mainNav li ul.dropDown li a {
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: 4em;
height: 28px;
display:block;
padding: 0 20px;
color: #606060;
text-transform: uppercase;
}
.mainNav li ul.dropDown li a:hover {
color: #ffc102;
}
.img-logo-coach-menu {
position: absolute;
margin-left: 5em;
}
.active {
background: #DCDCDC
color: #ffc102;
/*opacity: 1;*/
/*visibility: visible;*/
}
I was trying to do something like that
$('.mainNav li a').click(function(){
$('.mainNav li a ul.dropDown').hide();
$(this).closest(" .dropDown" ).css({"display" : "block"});
$(this).closest(" .dropDown" ).css({"opacity" : 1});
$(this).next().show();
});
but it is not working.
Mike you were not using your selectors properly, jquery always depends upon your DOM structure so your code might be correct but its possible that it will not give you desired result.
I just updated http://jsfiddle.net/mst0057o/4/
code correct is as follows
$('.mainNav > li a').click(function(e){
e.preventDefault();
$(this).next("ul.dropDown").css({"display" : "block"}).fadeTo('500', '1.0');
});
rest of part you need to take care, i just updated click function.
Related
Currently my website has the scrolling function with a fixed nav bar (page scrolls down when you click the differernt links on the navigation. I added the function that the page you are on the has an active link. The only issue is that when you click on a different link on the navigation bar, as it passes over the other pages those links highlight until you reach the page you want (for example if you are on contact and click home it highlights portfolio, then experience, then about, and then finally home once it reaches it. I don't want it to highlight the ones it passes over.
http://jsfiddle.net/gigi2233/e0jbvmyk/6/
HTML
<!--nav-->
<div id="icon">
<ul class="icon">
<li><img src="logo.jpg" alt="logo" class="icon"></li>
</ul>
</div>
<div id="nav">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EXPERIENCE</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<!--home-->
<div id="home">
<img src="home-large.jpg" class="homeposition">
</div>
<!--about-->
<div id="about">
<img src="home-large.jpg" class="aboutposition">
</div>
<!--experience-->
<div id="experience">
<img src="experience-large.jpg" class="experienceposition">
<br><br>
DOWNLOAD PDF
</div>
<!--portfolio-->
<br>
<div id="portfolio">
<img src="home-large.jpg" class="portfolioposition">
</div>
<!--contact-->
<div id="contact">
<img src="home-large.jpg" class="contactposition">
</div>
</body>
</html>
jQuery
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
js/jquery-1.10.2.min.js
CSS
body{
font-size: 12pt;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
margin-left: auto;
margin: 0px;
padding: 0px;
}
.wrapper{
width: 400px;
margin: 0 auto;
position: relative;
padding: 28px 0 0 0;
}
.down{
text-align:center;
position:relative;
}
/* nav */
#nav ul{
margin-top: 0px;
width: 100%;
padding: 25px 0px;
background-color: #f2f2f2;
border-top:solid #8dacf9;
position: fixed;
margin-left: auto;
text-align: center;
z-index: 4;
}
#nav ul li{
display: inline-block;
}
#nav ul li a{
text-decoration: none;
padding: 25px 35px;
color: #000000;
background-color: #f2f2f2;
}
#nav ul li a:hover{
color: #8dacf9;
background-color: #ffffff;
}
#nav ul li a.active{
color: #8dacf9;
background-color: #ffffff;
}
/* icon */
.icon{
float: left;
height: 50px;
margin-top: 0px;
position: fixed;
z-index: 10;
}
#icon ul{
margin-top: auto;
padding: 10px 30px;
background-color: #f2f2f2;
border-top:solid #8dacf9;
position: fixed;
}
#icon ul li{
display: inline;
}
#icon ul li a{
color: #000000;
background-color: #f2f2f2;
margin-top: 0px;
}
/* links */
a:link{
color: #000000;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
text-decoration: none;
color: #8dacf9;
}
a:active{
text-decoration: none;
color: #8dacf9;
}
/*home*/
#home{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
margin-right: auto;
margin-left: auto;
width: auto;
}
.homeposition{
text-align:center;
margin-top:70px;
}
/* about */
#about{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.aboutposition{
text-align:center;
margin-top:70px;
}
/* experience */
#experience{
height:auto;
position:relative;
color: #000000;
text-align: center;
}
.experienceposition{
margin-top:70px;
}
.resume:link{
color: #8dacf9;
font-size: 1.2em;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.resume:visited{
text-decoration: none;
color: #8dacf9;
}
.resume:hover{
text-decoration: none;
color: #b4b3b3;
}
.resume:active{
text-decoration: none;
color: #b4b3b3;
}
/* portfolio */
#portfolio{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.portfolioposition{
text-align:center;
margin-top:70px;
}
/* contact */
#contact{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.contactposition{
text-align:center;
margin-top:70px;
}
JAVASCRIPT
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 10) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 0)
}, 900);
return false;
}
}
});
});
I think you can remove the scroll function, and highlight the link only when clicking on it.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Remove 'active' class from all links
$('.link').removeClass('active');
// Add 'active' class to the current link
$(this).addClass('active');
// And animation
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 0)
}, 900);
return false;
}
}
});
});
I didn't test it, but something like this should work. I don't think you really need the window.scroll() function.
I want to highlight my current menu item in asp.net with jquery but I don't know why it is not working. Here is my code:
Site.css:
#menu {
background: #292929;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0em 2em;
line-height: 80px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
font-weight: 700;
color: white;
}
#menu .current_page_item a {
background: #01A9DC;
color: #FFF;
}
#menu a:hover {
text-decoration: none;
background: #01A9DC;
color: #FFF;
}
#menu a:active {
background: #01A9DC;
color: #FFF;
}
Site.Master:
<div id="menu" class="container">
<ul>
<li>Home</li>
<li>Softcare</li>
<li>Softlearn</li>
<li>Software</li>
</ul>
</div>
jQuery (1.7.1) inside <head>:
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$("menu ul li a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('current_page_item');
}
});
I also tried with javascript and it didn't work out well either, i think jquery is the best at doing this job, any advice is appreciated.
This is the flawless way I have always used jQuery to highlight the current menu item
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I am trying to render a horizontal submenu with the HTML, CSS, and Javascript code below.
When I click on the two options, the menu's do not show themselves. Basically nothing comes up...
HTML
<div id="topnav">
<ul>
<li>
Artist
<ul class="submenu">
<li>Sketchbook</li>
<li>Words</li>
<li>Media</li>
<li>Artwork</li>
</ul>
</li>
<li>UI/UX Developer
<ul class="submenu">
<li>Portfolio</li>
<li>Resume</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
<style type="text/css">
h1 { position: absolute;
top: 130%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /*half the height */
margin-left: -250px; /*half the width */
font-variant: small-caps;
text-align: center;
color:#737b83; }
</style>
<style type="text/css">
a:link { color:#737b83;
font-variant: small-caps;
text-decoration: none;
}
a:visited { font-variant: small-caps;
color: #3f6317;
text-decoration: none;
}
a:hover { font-variant: small-caps;
color: #103b50;
text-decoration: none;
}
a:active { font-variant: small-caps;
color: #44aadd;
text-decoration: none;
}
</style>
<style type="text/css">
p {position: absolute;
left: 85%;
color:#737b83;
font-variant: small-caps;
}
</style>
<style type="text/css">
#topnav
{
float: left;
width: 900px;
height: 24px;
margin-top: 3px;
position: relative;
font-size: 12px;
}
#topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
text-decoration: none;
}
#topnav ul li a:visited
{
text-decoration: none;
}
#topnav ul li a.active
{
text-decoration: none;
}
#topnav ul li ul.submenu
{ float: left;
position: absolute;
left: 0;
top: 24px;
display: none;
}
#topnav ul li ul.submenu a
{
display: inline;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
</style>
JavaScript
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem =
$(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display','none');
}
$(document).ready(function()
{
$('#topnav > ul > li ').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(){
if ($(this).attr('class') !='active')
{
$('#topnav ul li a').removeClass('active');
}
});
});
</script>
<script language="javascript">
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem =
$(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display','none');
}
$(document).ready(function()
{
$('#topnav > ul > li ').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(){
if ($(this).attr('class') !='active')
{
$('#topnav ul li a').removeClass('active');
}
});
});
</script>
Can someone explain why it is not showing?
Your code worked as fine.
http://jsfiddle.net/UFMjb/
Can you check if you have included jQuery correctly?
<script src="/path/to/jquery"></script>
<script>
//your script goes here
</script>
Update: try include this above your javascript in your header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I have one little problem, I included submenu on this page: http://www.shadowopsweaponry.com/default.aspx.
On the left side there is 'gunsmithing' category and if you click on that link a new submenu pops up below that link.
Also there are two other submenus 'gun coating' and 'firearm training' which are acting same, even if you click on other main link after that, they are staying highlighted.
When I am clicking on some of the submenu links I want that selection to be highlighted and not the one which I selected before that, how can I achieve that?
Edit: Adding CSS.
.arrowsidemenu {
width: 180px; /*width of menu*/
background: #212121;
}
.menucontents div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu .menuheaders a { }
.arrowsidemenu div a { /*header bar links*/
font-size: 12px;
display: block;
padding-left: 10px;
padding-top: 4px;
text-decoration: none;
}
.arrowsidemenu div a:link, .arrowsidemenu div a:visited {
color: #fff;
}
.arrowsidemenu div a:hover { }
.arrowsidemenu div.unselected a { /*header that's currently not selected*/
color: #fff;
}
.arrowsidemenu div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: inherit;
}
.arrowsidemenu ul li {
line-height: 8px;
padding-left: 12px;
}
.arrowsidemenu ul li a { /*sub menu links*/
display: block;
font-size: 12px;
text-decoration: none;
color: #FFF;
padding: 5px 0;
padding-left: 10px;
}
.arrowsidemenu ul li a:hover { }
.active-sub-menu {
color: #f93;
}
Your class called "selected" is being placed onto div > a href. You need that class instead to land on ul > li> a href. This is a problem in your .aspx, not really in the css.
If you get the html fixed, you'll want to change this line:
.arrowsidemenu div.selected a {
color: #FF9933;
}
At that point, probably you can just use .selected instead.
You can see these more easily by using Firebug, addon for Firefox. If you get it, you can right-click an item to see what styles are applied.
I have a simple drop down menu, but when used it does not work correctly, I think there is a problem with the JavaScript as it just keeps bouncing up and down!
jsFiddle Here: http://jsfiddle.net/pJeDV/
<div class="container">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
CSS
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}
#coolMenu li:hover ul.noJS {
display: block;
}
JavaScript
<script type="text/javascript">
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
</script>
http://jsfiddle.net/pJeDV/
Here is the working fiddle: http://jsfiddle.net/surendraVsingh/pJeDV/6/
Jquery
$(function(){
$('#coolMenu > li').hover(function(){
$(this).find('ul').slideToggle();
});
});
CSS (remove below given code completely)
#coolMenu li:hover ul {
display:block; /* Remove This*/
}
is this what you're looking for? instead of using .find('> li') i used .children('a'). Also inside the .hover() function you're missing the mouseout function.
jsFiddle
here's the code:
$(function(){
$('#coolMenu').children('a').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.slideToggle('fast');
},function(){
$(this).find('ul')
.addClass('noJS')
.slideToggle('fast');
});
});