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 trying to perfect my jQuery menu.
However I run on some CSS issues and I'm stuck. Here's my issues.
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
I run on some CSS issues and I'm stuck. Here's my issues.
I run on some CSS issues and I'm stuck. Here's my issues.
To sum it up:
To add paddings to links without icons, wrap all text inside items into <span> (only those that have no <span> yet) and add padding-left to spans that have no icon before them:
nav li span:first-child {
padding-left: 24px;
}
Display borders only for items that are last in the group:
nav li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
The scrollbar appears because you have min-width rule specified. Do not do it. It will mess up small screens because it will never collapse. Also remove padding-right: 65px; and padding-right: 280px; - they are bogus.
Here's the final fiddle: https://jsfiddle.net/pjb7jzjk/36/
P. S. I suggest you to add overflow-y: scroll rule to .sidebar-nav to make it scrollable on screens with small height.
Ad.1 - try to add
#nav li > ul > li {
padding-left: 3em;
}
I try to make one simple demo using this link
I am able to make this as understand better
here is demo But when I integrate it my application it break .Mean display half (in form of cut pieces ) .why ? CSS is not applied in that
Actually my breadcrumb not display as it display in my demo .I think ionic css is conflict my style css can we make this demo with ionic ? how to resolve this issue ?
here is my live application demo url
[![enter image description here][4]][4]
#my-breadcrumbs ul li {
list-style:none;
}
#my-breadcrumbs {
margin-top: 44px;
margin-left: 10px;
}
#my-breadcrumbs ul li a {
display: block;
float: left;
height: 25px;
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
#my-breadcrumbs ul li a:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid grey;
position: absolute; right: -20px; top: 0;
}
#my-breadcrumbs ul li a:before {
content: "";
position: absolute;
margin-top: -15px;
border-width: 20px 0 20px 20px;
border-style: solid;
border-color: grey grey grey transparent;
left: -20px;
}
/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none; }
/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-bottom-right-radius: 1px;
}
Try this
#my-breadcrumbs ul li a {
display: block;
float: left;
line-height: 13px; //Add this
height: 40px; //Change this
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
If you wantmargin between each links change margin: 0 22.5px 0 0; to margin: 0 30px 0 0;
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>
I've been using the following CSS dropdown box on my website, and I've noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page.
Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don't make a selection?
/* css */
#dropdown {
}
#dropdown ul {
}
#dropdown li {
}
.dropmain1 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
width: 98px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
margin-top: 10px;
-moz-box-shadow: 3px 9px 8px #888;
-webkit-box-shadow: 3px 9px 8px #888;
box-shadow: 3px 9px 8px #888;
}
.dropmain2 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
-moz-box-shadow: 3px 5px 8px #888;
-webkit-box-shadow: 3px 5px 8px #888;
box-shadow: 3px 5px 8px #888;
}
#drop2 { width: 633px; margin-top: 10px; padding: 9px; }
#drop3 { width: 200px; margin-top: 10px; padding: 9px; }
#drop4 { width: 200px; margin-top: 10px; padding: 9px; }
#drop5 { width: 200px; margin-top: 10px; padding: 9px; }
/*this is the css for the horizontal version*/
.horizontal ul{
border: none;
list-style-type: none;
padding:0;margin:0;
}
.horizontal ul li{
float: left;
position: relative;
margin:0;padding:0;
}
a.toplevel {
display: block;
color: #525252;
text-decoration: none;
overflow: hidden;
display:inline-block;
padding-left:15px;
padding-right: 15px;
line-height:18px;
background:transparent url(images/misc/menu_open.gif) center left no-repeat;
}
.horizontal li li{
float: none;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
}
.horizontal ul ul ul{
width: 130px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
padding: 12px;
}
.horizontal ul li:first-child>a{
}
.horizontal ul li a.first{
}
.horizontal ul li li a.first{
}
.horizontal ul li li:first-child>a{
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: ' ';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
}
.bluewhite li a{
background-color: ;
color: #ffffff;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
/* HOVER */
}
.bluewhite li:first-child>a:hover{
}
.bluewhite ul{
border-color: #000033;
}
#ldrop a:link, #ldrop a:visited {
}
#ldrop a:hover, #ldrop a:active {
}
#holdjump1 {
padding-left: 8px; padding-bottom: 6px;
}
#holdjump1 div {
}
#holdjump1 a:link, #holdjump1 a:visited {
padding: 2px 0 2px 3px; margin:0;
}
#holdjump1 li {
padding:0; margin:0;
}
.fjl {
display: inline-block;
border-bottom: 1px dotted #c1c1c1;
width:30%;
margin: 0 5px 0 5px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.fjl a:link, .fjl a:visited {
display: block;
}
.fjl a:active, .fjl a:hover {
background: #a1a1a1;
text-decoration: none;
color: #ffffff;
}
<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">
<ul>
<li>Menu Link</li>
<ul> <li>test</li> </ul>
</ul>
</div>
oops!, I just noticed I had posted the wrong "order" of the ul list.
I posted
$('div#dropdown ul li').click
when it actually should be
$('div#dropdown li ul').click or
$('div#dropdown li ul li').click
What I previously posted was for the main links to be opened and closed. The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.
$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.
Or you could just create classes for each level. Example
instead of a 2-level drop being
$('div#dropdown li ul li ul
you could just do something like this >>
Example menu with a 2-level sub menu
<ul>
<li>link1<ul class="sub1">
<li>sublink1-1<ul>
<li>sub-sublink1-1</li>
<li>sub-sublink1-2</li></ul></li></ul></li>
</ul>
Jquery
<script>
$(document).ready(function() {
$('ul.sub1').click(function() {
$(this).slideToggle();
});
});
</script>
That would cause the 2nd level sub menus to slide up or slide down on click, thus "showing" and "hiding".
Hope this helped a little more!
You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work.
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).show();
$('div#dropdown ul li').click(function() {
$(this).hide();
});
});
});
</script>
or
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).slideDown();
$('div#dropdown ul li').click(function() {
$(this).slideUp();
});
});
});
</script>