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.
Related
I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).
There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
$('.ul-color li').on('click',function(){
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');
});
});
.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
Before any click :
pic-1
After i clicked on 'choose a color' :
pic-2
if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too:
pic-3
so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen
pic-4
Try this,
HTML
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li class="color">color1</li>
<li class="color">color2</li>
<li class="color">color3</li>
<li class="color">color4</li>
<li class="color">color5</li>
</ul>
</div>
</div>
CSS
.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}
Javascript
$('#slect-color').on('click',function(){
$('ul li').show();
});
$('.color').on('click',function(){
$('.color').hide();
$(this).css('display','block');
});
This is a bit too complex to handle everything with display: block and display: none. I slightly changed your code to add a few classes:
ul.initial is you initial state, where "Choose a color" is visible
ul.opened is when all colors are shown, for one to be picked
li.selected is the color you've picked
What you want is that any li shows up if:
We're in the initial state, and the li is the "Choose a color" one
We've opened the list, and the li is NOT the "Choose a color" one
The li is the one selected
Here's the CSS part that is interesting for you:
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
And below, a working snippet based on your code, with my improvements:
$('.ul-color li').on('click',function() {
var list = $('.ul-color');
if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}
list.toggleClass('opened');
list.removeClass('initial');
});
.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;
}
.color-select ul li {
margin-right: 10px;
padding: 10px;
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">
<li id="select-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the li elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.
Also, I'd like to override or prevent the :hover pseudo class when the link is active.
Here's the codepen which will hopefully make this clearer.
Could you please advise how to override the a element's font color?
Thanks!
You have HTML looking like
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
.......
Then styles for the anchors
.topnav a { color: #fff; }
then you add the active class to the LI elements, but the styles are only set as
.active { color: #FFADA0; }
That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like
li.active a { color: #FFADA0; }
As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with
li.active {
border:3px solid #FFADA0;
}
li.active a {
color: #FFADA0;
}
Codepen
Add
.topnav .active a {
color: #FFADA0 ;
}
$('.topnav li').click(function() {
$(".topnav li.active").removeClass("active");
$(this).addClass('active');
});
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
letter-spacing: 3px;
margin: 0;
padding: 15px 0 15px 30px;
display: inline-block;
color: #fff;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
list-style: none;
font-family: 'Montserrat', sans-serif;
background-color: #000;
z-index: 1;
}
.topnav li {
display: block;
float: right;
margin: 20px 8px 0 0;
}
.topnavli {
border: 3px solid #fff;
}
.topnav li:first-child {
margin-right: 50px;
}
.topnav li:hover {
border: 3px solid #6fb7b7;
transition: 0.3s;
}
.topnav .active a {
color: #FFADA0 ;
}
.topnav a {
display: block;
color: #fff ;
font-weight: 600;
padding: 10px 0 ;
font-family: 'Raleway', sans-serif;
text-align: center;
text-decoration: none;
width: 120px;
}
.topnav a:hover {
color: #6fb7b7;
text-decoration:none;
transition: 0.3s;
}
.active {
color: #FFADA0 ;
border:3px solid #FFADA0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="header">
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
<li class="topnavli">Link 2</li>
<li class="topnavli">Link 1</li>
<h1>website</h1>
</ul>
</div>
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.
I have used the below script to create multilevel megamenu with a lot of customizations.
Below is the JsFiddle link for the same.
WORKING FIDDLE LINK
Below is the CSS code for the same.
/* ######### Drop Down DIVs CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
/* ######### Marker List Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;
}
.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}
.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}
.topRound{
border-radius:5px 5px 0 0;
}
.bottomRound{
border-radius:0 0 5px 5px;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
.blackwhite li a{
background: white;
}
.blackwhite li a:hover{
background: black;
color: white;
}
ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}
.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}
The script and css are working fine. When you move on to the navigation items, you can see the mouse over selection with a darker background color and font bold.
Now, this menu is coming dynamically from a js/jsp include file.
What I need is when a user wants to open up a page, onclick of it, the hover style should stay.
For instance,
If you mouse over on JavaScript Reference > Item Folder 5b > Item Folder 5.2b > Sub Item 5.2.1b and when you want to open Sub Item 5.2.1b, onclick of it, when the page relevant to Sub Item 5.2.1b opens, the hover style should stay on click for the user to know that he is on Sub Item 5.2.1b page when he again wants to hover and open another page or see on what page is he on.
Any other ways are welcomed, but should work on my dynamic scenario.
If this is for a single page app, then just give the active item an active class that you can style as the active item.
Otherwise, you will need to do this server-side. Your CMS/server-side app needs to give a class active to the current active menu item.
.ddsubmenustyle li a:hover,
.ddsubmenustyle li a.active {
font-weight:bold;
background-color:#bfbfbf;
}
I have a nested unordered list that I want to expand accordion-like for new sub-items when a parent is clicked.
The functionality is working fine, but the parent list isn't sliding down to accomodate the newly visible sub-list (so the sub-list just slides on top of the unmoving parent list). I tried this on a fiddle and strangely it worked fine there. I'm guessing it has something to do with the CSS I'm using to format the list?
The code....
HTML:
<ul>
<li>
news
<ul>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
<li>scores</li>
<li>standings</li>
<li>the ddl</li>
<li>records</li>
<li>teams</li>
</ul>
Javascript:
$(document).ready(function() {
$('#nav-bar ul li').on('click', function() {
$(this).children().slideDown('fast');
$(this).siblings().children().slideUp('fast');
});
});
CSS:
#nav-bar { /*left bar*/
float: left;
width: 110px;
text-align: center;
height: inherit;
}
#nav-bar ul { /*main menu*/
list-style-type: none;
text-align: left;
padding: 0px;
}
#nav-bar ul li { /*main menu item*/
height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
#nav-bar ul li ul { /*sub-menu*/
display: none;
}
#nav-bar ul li ul li { /*sub-menu item*/
height: 35px;
background-color: #aaa;
color: #666;
border-bottom: 1px solid #333;
}
you fixed an height where it should be , IMHO, a min-height:
http://jsfiddle.net/7VPG6/36/
#nav-bar > ul> li { /*main menu item*/
min-height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
take a look at : http://www.w3.org/TR/css3-selectors/