I have created an li item with Html.ActionLink which renders ultimately as an anchor tag. I have applied CSS for hover and it works perfectly fine.
Now I need to highlight the li box when I click on it. I have used jQuery but that doesn't seem to work. I have checked the debugger tools and there doesn't seem to be any errors. So I guess it's the case that the class is not getting applied. I'm Not sure what the problem is. Please see my code below.
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>
You should read about CSS Specificity: your .highlightMenu {} selector will never be applied, because .#navcontainer ul li {} selector is more specific. Prefer Class selectors, check out BEM methodology.
From MDN about !important:
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
If you want to set .highlightMenu class to <li> when clicking on <a>, you could use jQuery .closest() for it.
If you add list items dynamically, you could use Event Delegation.
I've cleaned your code and rewritten it in BEM-style with the fixes, check out:
$('.nav').on('click', '.nav__link', function() {
$('.nav__item_selected').removeClass('nav__item_selected');
$(this).closest('.nav__item').addClass('nav__item_selected');
});
.nav {
display: block;
list-style-type: disc;
padding-top: 40px;
}
.nav__item {
display: inline-block;
border: 5px solid #009ddc;
padding: 0;
background: #fff;
color: #24387f;
}
.nav__item:hover, .nav__item_selected {
color: #fff;
background-color: #009ddc;
}
.nav__link {
display: inline-block;
text-decoration: none;
padding: 0.2em 3em 1em 1em;
color: #24387f;
font-size: larger;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Team Management</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">User Management</a>
</li>
</ul>
I have changed a little bit your CSS and your script.
Now the new class is added correctly to the elements.
Please, have a look at https://fiddle.jshell.net/mh2gqmju/
All the best.
What you are doing wrong is targeting the hyperlink, while you need to highlight the list-item only.
But now, if you correct your code to target the list-item in the list in place of the hyperlinks, you won't be able to see changes on the screen. (You would be able to see the classes toggling in the browser's developer tools though, obviously).
Why so? Because the hyperlink inside the list-item is hiding all the changes you want to see when the list-item gets clicked.
I added one more CSS property to the .highlightMenu in order to make you notice the changes.
See yourself:
JavaScript is modified to target the list-items, not hyperlinks within the ul in #navcontainer
.highlightMenu carries one extra CSS property now (outline), to notice the style changes on the click event.
$(document).ready(function() {
$('#navcontainer ul li').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>#Html.ActionLink("Team Management", "Team", "Admin", null, null)</li>
<li>#Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li>
</ul>
</div>
I hope it helped.
For a quick and easy hack which allows elements to respond when clicked but which does not require any scripting:
add the tabindex="0" attribute to the element
apply styles to the element, using the :focus pseudo-class
Working Example:
li {
display: inline-block;
width: 100px;
height: 100px;
color: rgb(227, 227, 227);
background-color: rgb(127, 127, 127);
text-align: center;
vertical-align: top;
}
li:nth-of-type(1):hover {
color: rgb(255, 255, 0);
background-color: rgb(255, 0, 0);
}
li:nth-of-type(1):focus {
color: rgb(255, 255, 255);
background-color: rgb(0, 127, 0);
}
li:nth-of-type(2):hover {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}
li:nth-of-type(2):focus {
color: rgb(255, 255, 255);
background-color: rgb(127, 127, 255);
}
<ul>
<li tabindex="0">
Red on<br />Hover
<br /><br />
Green on<br />Click
</li>
<li tabindex="0">
Yellow on<br />Hover
<br /><br />
Blue on<br />Click</li>
</ul>
The reason I believe your code might not be working is this line
$('#navcontainer ul li a').click(function()
You have included the anchor "a" on the selector eventhough you want to be highlighting the "li" tag. It should be more like this:
$('#navcontainer ul li').click(function()
I have checked this on fiddle.jshell and it seems to fix the problem.
<code>
$(document).ready(function() {
$(document).on('click', '#navcontainer ul li a', function () {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});`enter code here`
});
</code>
<br>
Please use the above added code i believe it's good for query..
Your code is correct ... You just need to modify your .css a bit.
Old css :-
padding: .2em 3em 1em 1em;
Changed to :-
padding: 2px 1px 1px 1px ;
See the screen shot
$(document).ready(function() {
$('#navcontainer ul li a').click(function() {
$('.highlightMenu').removeClass('highlightMenu');
$(this).addClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
cursor:pointer;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li a:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: 2px 1px 1px 1px ; /*padding: .2em 3em 1em 1em;*/
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li><a> Team Management </a></li>
<li><a>User Management</a></li>
</ul>
</div>
I made some changes to css and jquery
$(document).ready(function() {
$('#navcontainer ul li').click(function(e) {
e.preventDefault(); // Remove this line please, just for this example
$(this).addClass('highlightMenu').siblings().removeClass('highlightMenu');
});
});
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top: 40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
/*height: 50px;
width:150px;*/
border: 5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom: 5px solid #009ddc;
border-top: 5px solid #009ddc;
z-index: 0 !important;
padding: 0;
background: #fff;
color: #24387f !important;
}
#navcontainer li:hover {
color: #fff !important;
background-color: #009ddc;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 3em 1em 1em;
color: #24387f !important;
font-size: larger;
font-weight: bold;
}
#navcontainer ul li.highlightMenu {
color: #fff !important;
background-color: #009ddc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navcontainer">
<ul class="nav navbar-nav navbar-left text-center">
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
I am tired to create drop down menu in my existing main menu of website. I have tried many times but no result sometimes I get menu inline sometimes everything disturbed.
HTML code :
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
<li>Affiliate Programs</li>
<li>
<img src="<?=$site_folder?>/images/rss.png" alt="RSS" />
</li>
<li> </li>
</ul>
and CSS code:
div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; }
div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; }
ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; }
ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px; background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; }
ul.mainmenu li a { color: #fff; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; }
I am waiting for anybody to help me . Thanks
So, you may do something like below. Add a class .dropdown to the 2dn level menu and hide it to begin with. Then, on li:hover display it. You need to apply positions to your main menu and dropdown menu as I did in the CSS. Feel free to style your dropdown the way you like. Take a look.
ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; }
ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; }
ul.mainmenu li a { color: #000; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; }
ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; }
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul class="dropdown">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
</ul>
I have a pretty simple CSS/JS drop down menu. The problem is, when I click on select1, select 2 and 3 also drop down with the rest of the children links. http://codepen.io/donnaloia/pen/GqiKl
This shows exactly what I'm talking about. How do I fix this?
HTML
<div class='dropdown'>
<h1 class='title'>Select1</h1>
<ol class='drop'>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Mango</li>
</ol>
</div>
<div class='dropdown'>
<h1 class='title'>Select2</h1>
<ol class='drop'>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Mango</li>
</ol>
</div>
<div class='dropdown'>
<h1 class='title'>Select3</h1>
<ol class='drop'>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Mango</li>
</ol>
</div>
CSS
.dropdown {
position: relative;
margin: 50px auto;
display: table;
font-family: sans-serif;
font-size: 11pt;
color: #FC3;
line-height: normal;
text-align: left;
font-smoothing: antialiased;
}
.dropdown .title {
cursor: pointer;
height: 45px;
padding: 0 20px;
border-radius: 5px;
display: block;
box-shadow: 0 0 0 1px #FC3;
line-height: 45px;
}
.dropdown .title:after {
content: '';
float: right;
width: 0;
height: 0;
margin: 20px 0 0 20px;
border-width: 5px 4px 0;
border-style: solid;
border-color: #FC3 transparent transparent transparent;
}
.dropdown .drop {
position: relative;
top: 100%;
margin-top: 1px;
border-radius: 0 0 5px 5px;
display: none;
overflow: hidden;
box-shadow: 0 0 0 1px #FC3;
}
.dropdown .drop li {
cursor: pointer;
padding: 10px;
}
.dropdown .drop li:hover {
background: #FC3;
color: #FFF;
}
.select .title {
border-radius: 5px 5px 0 0;
}
.select .title:after {
transform: rotate(180deg);
}
JS
$('.dropdown .title').on('click',function(){
$(this).parent().toggleClass('select').find('.drop').toggle();
});
$('.dropdown .drop li').on('click',function(){
var $this = $(this), input = $this.text();
$('.dropdown .title').text(input);
});
Would it be so hard to instead float: left each of these divs? That way you don't need to worry about inline-block's behavior.
http://codepen.io/anon/pen/mKyfD
I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO
Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo
I have this kind of menu structure
<nav id="navigation">
<ul class="menu">
<li class="current-menu-item currrent_page_item">Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
and a css for the menu
#navigation{float: right; padding: 10px 0px; display: block;}
#navigation li{float: left; display: inline;}
#navigation li a{
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li{
padding: 0px 2px;
border-left: 1px solid #292929;
border-right: 1px solid #605f5f;
}
#navigation li:first-child{
border-left: none !important;
}
#navigation li:last-child{
border-right: none !important;
}
.current-menu-item a, .current_page_item a{
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
as you can see in styling, it produced a menu with a left and right border and a pushed like background with box shadow in the current menu, my problem is, the borders in the both left and right side of the menu looks ugly when the current menu is on between and I want to get rid of those borders. I mean for example, when the current menu is the About menu, now the left side border of the Contact menu must be removed as well as the right side border of the Portfolio menu, in that way things will look neat and cool.
Currently Im looking for a way on how to make it that way but no luck so far.
You can do this with pure CSS as follows (see JSFiddle here):
#navigation {
float: right;
padding: 10px 0px;
display: block;
}
#navigation li {
float: left;
display: inline;
}
#navigation li a {
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
}
#navigation li {
padding: 0px 2px;
border-left: 2px solid #292929;
}
#navigation li:first-child,
.current-menu-item,
.current_page_item,
.current-menu-item + li,
.current_page_item + li
{
border-left: none !important;
}
.current-menu-item a,
.current_page_item a {
background: #414141;
border: 1px solid #4b4b4b !important;
border-bottom: 1px solid #323232 !important;
-moz-box-shadow: inset 0 0 10px #353333;
-webkit-box-shadow: inset 0 0 10px #353333;
box-shadow: inset 0 0 10px #353333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior:url('border-radius.htc');
}
Basically, the idea is this:
Only use border-left
Remove the border on
The first item (#navigation li:first-child)
The current item (.current-menu-item, .current_page_item)
The item immediately following the current item (.current-menu-item + li, .current_page_item + li)
You could use a bit of jquery:
$('.current-menu-item').css('border','none');
$('.current-menu-item').next('li').css('border-left','none');
$('.current-menu-item').prev('li').css('border-right','none');
Demo: http://jsfiddle.net/sDFzS/