I am using Cufon (http://cufon.shoqolate.com/generate/) to replace some text in a menu.
Problem is that I only need to style the first <li> of the first <ul>.
I have tried using:
Cufon.replace('#menu ul li > a', { fontFamily: 'Christopherhand', hover: { color: '#99c635'}});
With the > seperator, but it does not work. It still replaces the #menu ul li ul li a
This is my markup:
<div id="menu">
<ul>
<li class="current">
About JW
<ul>
<li>Subpage 1</li>
<li>Subpage 2</li>
<li>Subpage 3</li>
<li>Subpage 4</li>
</ul>
</li>
<li>Our Products</li>
<li>Best Recipes</li>
<li>Health & Diet</li>
<li>Our Ads</li>
</ul>
</div>
Can anyone see the problem? It should work without adding a class to sub <ul>. :-)
Thank you.
You can use:
Cufon.replace('#menu > ul:first > li:first > a');
but you have to include jQuery before cufon import in order to use such selector.
https://github.com/sorccu/cufon/wiki/usage
Related
how can i summarize the following css code? The current css code will display all li element as none.
ul.cmpro-accordion > li:not(.cid-2),
ul.cmpro-accordion > li:not(.cid-61){
display: none;
}
It's about specificity.
<ul class="cmpro-accordion">
<li>li text 1</li>
<li class="cid-2">li text 2</li>
<li class="cid-61">li text 3</li>
<li>li text 4</li>
<li>li text 5</li>
</ul>
Css:
ul.cmpro-accordion > li.cid-2,
ul.cmpro-accordion > li.cid-61 {
display: block
}
ul > li:not(.cid-2),
ul > li:not(.cid-61) {
display: none;
}
Example
Can you please take a look at this demo and let me know how I can fix the left indent of the inner <ul> and get rid of the dropped gray area before the child red background?
<ul class="sidebar-navigation">
<li>List 1
<ul class="sidebar-inner-list">
<li> Link</li>
<li> Link </li>
</ul>
</li>
<li>List 2
<ul class="sidebar-inner-list">
<li> Link 2</li>
<li> Link 2</li>
<li> Link 2</li>
</ul>
</li>
</ul>
body{color:#fff;}
ul{list-style-type:none;}
li{background-color:#2d2d2d;}
li:hover{ background-color:#ccc;}
.sidebar-inner-list>li{ background-color:red; margin-left:-40px;}
http://jsfiddle.net/sQWE6/4/
ul { padding:0 }
Just remove the automatic padding from the list. I guess the real question here is why don't you just use <div>s? They don't have automatic padding, and you don't seem to want an actual list (list-style-type: none).
The ul list items has a padding-left by default, remove this and you should be good.
.sidebar-inner-list{
padding-left:0;
}
DEMO
I have navigation menus that look something like this:
<ul id="nav1">
<li>Link 1</li>
<li>
Link 2
<ul id="subnav1">
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I have a bunch of CSS styling that looks like this:
ul#nav1{ … styles … }
ul#nav1 > li{ … styles … }
But I really don't want the styling to cascade down to the "subnav1" menu, yet it is for some reason. I thought the "greater than" sign in my CSS would prevent that. How can I make the "subnav1" menu have its own styling, without anything cascading down from "nav1"?
ACTUAL CODE:
<ul id="nav2" class="clearfix">
<li>
<div class="nav2hl"></div><a class="drop" href="products.htm">Products</a>
<div class="menu1bg" classclearfix">
<ul class="menu1">
<li>RETAIL</li>
<li>Hot Dogs</li>
<li>Ring Bologna</li>
<li>Hams</li>
<li>Make it Easy Hams</li>
<li>Sausage/Brats</li>
<li>Deli Meats</li>
<li>Other</li>
</ul>
<ul class="menu1">
<li>FOOD SERVICE</li>
<li>Hot Dogs</li>
<li>Ring Bologna</li>
<li>Hams</li>
<li>Sausage/Brats</li>
<li>Deli Meats</li>
<li>Roller Bites</li>
<li>Pizza Toppings</li>
<li>Other</li>
</ul>
</div>
</li>
<li></li>
<li><div class="nav2hl"></div><a class="drop" href="recipes.htm">Recipes</a></li>
<li></li>
<li><div class="nav2hl"></div>Family<br />Fun</li>
<li></li>
<li><div class="nav2hl"></div>Special<br />Offers</li>
<li></li>
<li><div class="nav2hl"></div>Note &<br />Newsworthy</li>
<li></li>
<li><div class="nav2hl"></div>Retailer<br />Locator</li>
<li></li>
<li><div class="nav2hl"></div>Contact<br />Us</li>
</ul>
CSS:
div#nav2bg{background:#e8dcab url('../img/bg_nav2.jpg') repeat-y top center;}
ul#nav2{float:right;margin:0;padding:0;list-style-type:none;}
ul#nav2 > li{display:inline-block;position:relative;float:left;margin:0;padding:0;}
ul#nav2 > li:nth-child(even){width:1px;height:93px;background:transparent url('../img/bg_nav2_divider.png') no-repeat top left;}
ul#nav2 > li a,ul#nav2 > li a:visited{display:inline-block;position:relative;width:107px;height:67px;margin:0;padding:26px 0 0 0;color:#856e46;text-align:center;text-transform:uppercase;}
ul#nav2 > li a.drop{height:59px;padding-top:34px;}
ul#nav2 > li a:hover{color:#f4eed6;}
ul#nav2 > li div.nav2hl{display:none;position:absolute;top:0;left:0;width:107px;height:93px;background-color:#af9764;}
div.menu1bg{position:absolute;top:93px;left:50%;z-index:999;width:488px;height:297px;margin-left:-244px;background:rgba(237,230,206,0.95);}
ul.menu1{float:left;width:244px;height:297px;margin:0;padding:0;list-style-type:none;}
You have
ul#nav2 > li a, ul#nav2 > li a:visited { ... }
This will target all the anchors under ul#nav2 > li, since the anchor in your second level nav qualifies so it will take styles from it
Use
ul#nav2 > li > a, ul#nav2 > li > a:visited { ... }
to target the more specific anchor, you might need to apply this at multiple places
Basically you have to override them.
A similar question was answered here:
How do I prevent CSS inheritance?
The > is exactly what you should be using.
I made a JSFiddle for some examples of technicalities of using >:
For example, #nav1 changes the list-style and only the #nav1 > li's are affected (#subnav1 is still the default circle):
#nav1 > li{list-style-type:square;}
HOWEVER, should you do something like #nav2 > li{background-color: yellow;}, the background-color of #subnav2 with still be yellow because it is nested WITHIN #nav > li
I am trying to make a webpage with a navigation functionality EXACTLY like this one: http://www.rex-ny.com/ where you click a list item and its children items appear and stay.
I can do it with hover, but I can't figure out how to make it stay when not hovering.
It seems like the most simple thing is the most difficult to do.
<ul id="menu">
<li>Menu 1
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
</ul>
Thanks
Here is a jsfiddle http://jsfiddle.net/phzuC/
Here is a CSS only solution as the OP requested, using tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/
#menu li > ul {
display:none;
}
#menu li:focus > ul {
display:block;
}
li {
outline: 0;
}
EDITED
Here is a jQuery solution should you ever need it. It keeps the submenus open and it's simple to implement. 11 lines of code.
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/
$(document).ready(function() {
$(".nav-top > li").click(function(e) {
if($(this).find('ul').hasClass('expanded')) {
$(this).find('ul').removeClass('expanded').hide();
} else {
$(this).find('ul').addClass('expanded').show();
}
});
$('.nav-top a').click(function(e){
e.preventDefault();
});
});
Here is another CSS only solution that uses either:
Checkboxes if you want the menus to toggle on click
radio buttons if you want the menus to auto close when another is selected
Reference:
CSSTricks: Stuff you can do with the “Checkbox Hack”
The CSS Ninja: CSS Tree
Demo
Basic behavior CSS (the demo has more styling to remove the default list indentation/bullets):
.sideMenu input[type='radio'],
.sideMenu input[type='checkbox'] {
display: none;
}
.sideMenu input[type='radio'] + ul,
.sideMenu input[type='checkbox'] + ul {
position: relative;
display: none;
}
.sideMenu input[type='radio']:checked + ul,
.sideMenu input[type='checkbox']:checked + ul {
display: block;
}
HTML (can be arbitrarily deep):
<nav class="sideMenu">
<ul>
<li>
<label for="menu1">Menu 1</label>
<input id="menu1" type="checkbox" name="menu1">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<!-- repeat -->
</ul>
</nav>
please help me to style this list , I need to set different background image for each list item, but class are same.
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
I know this one , but it works only for fist item :(
ul:first-child li{
/*my css*/
}
Why would you give all the li's the same class?
Give the ul a class to style the contained li's, then give the li's their own class, like so:
<ul class="sameforall">
<li class="one">menu 1</li>
<li class="two">menu 2</li>
<li class="three">menu 3</li>
<li class="four">menu 4</li>
</ul>
.sameforall {color: red;}
.sameforall .one {background-color: blue;}
.sameforall .two {background-color: green;}
.sameforall .three {background-color: pink;}
.sameforall .four {background-color: purple;}
You can't access the HTML, CSS3 supports :nth-child() psuedo selecting - http://css-tricks.com/how-nth-child-works/
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
.sameforall:nth-child(1) { background-color: blue; }
.sameforall:nth-child(2) { background-color: green; }
.sameforall:nth-child(3) { background-color: pink; }
.sameforall:nth-child(4) { background-color: purple; }
Note, this won't work in most old browsers.
I would avoid the use of first-child since it's not fully supported and where it is, it's probably still buggy. In regards to referring to the other elements or childs, your best shot would be to give them a different id and style them using it. Like this:
<ul class="sameforall">
<li id='first' >menu 1</li>
<li id='second'>menu 2</li>
<li id='third' >menu 3</li>
<li id='forth' >menu 4</li>
</ul>
Then you would refer to those elements in the css file like this:
#first{/*Your css*/}
If you want to see a list of support browsers for the nth-child visit this page it contains a table with some of the most popular browser versions and the support issues they may have with it.
you need :nth-child() btw it should be
ul li:fist-child
Since you can't change the markup and child selecting via CSS is not supported that well, the only way for you is to do it with JavaScript.
<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>
<script type="text/javascript">
var listItems = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var numChildren = listItems.length;
for(var i = 0; i < numChildren; i++) {
var item = listItems[i];
// -> do whatever you want with each item.
switch(i) {
case 0: item.style.backgroundImage = 'url(item-1.gif);'; break;
case 1: item.style.backgroundImage = 'url(item-2.gif);'; break;
case 2: item.style.backgroundImage = 'url(item-3.gif);'; break;
}
}
</script>
you need to go with the nth-child method.
Here the stuff is well detailed. Hope this will help you.
http://www.w3.org/TR/css3-selectors/