In CSS, how would I select the .button element? I have tried just .button but it is not working at all. The only way I can get it to hide is by hardcoding style="display: none;
<div id="navBar">
<nav>
<li><a class="button">☰</a>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Schedule</li>
<li>Media</li>
<li>Sponsors</li>
<li>Contact Us</li>
<li><img src="images/fbicon.png"></li>
<li><img src="images/ticon.png"></li>
</ul>
</nav>
</div>
You could do something like creating a css class called .only-mobile like this
.only-mobile {
display: none;
}
And then using media queries you can change .only-mobile to display in block etc.
Related
I am running this simple "test" code to change the background color of the nested list<ul class="dropcontent"> by using :hover on parent <li class="drop">
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Please someone explain what's wrong here.
.dropcontent is a sibling of .drop (not a descendant), so the selector .drop:hover .dropcontent will not target it.
To correct this, either move the closing </li> of .drop to after the closing </ul> of .dropcontent:
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
</li>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Or make use of the adjacent sibling combinator (+) with the selector .drop:hover + .dropcontent:
.drop:hover + .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Note that the former will apply the hover while the child links are selected, while the latter will only apply the hover when .drop itself is selected.
How can I add an icon to every list element?
<nav class="mobile">
<ul>
<li><img class="icon" src="images/ico/home.png" style="width:10px; height:10px; margin: 2px; float:left;"/>Home</li>
<li>Articles</li>
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</nav>
I've tried this so far, but my icon is not in line with <a> element.
You can use variety of tools like font icons from font awesome or even you own custom font. Just use the pseudo class :before to the li and then add content to it.
li:before {
content: '+';
}
li:before {
content: '+';
}
<nav class="mobile">
<ul>
<li>Home</li>
<li>Articles</li>
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</nav>
It's simple, just use css in header:
<style type="text/css">
li:id1 {
list-style-image: url('anyimg1.gif');
}
li:id2{
list-style-image: url('anyimg2.gif');
}
</style>
And HTML:
<ul>
<li id="id1">Home</li>
<li id="id2">Articles</li>
</ul>
Instead of adding a individual class to each list items, is there a way to add a single class to a whole set of list item at once?
CSS
<li class="foot_nav">Home</li>
<li class="foot_nav">Discovery</li>
<li class="foot_nav">Subjects</li>
<li class="foot_nav">Guide</li>
<li class="foot_nav">About us</li>
Thanks
It's only one way - JS. Jquery for example:
$('li').addClass('foot_nav');
Just add a class to parent and use child selector:
.foot_nav li {
display: inline-block;
}
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
apply the class to the entire ul and then targeth the ul li using CSS
.foot_nav{list-style:none}
.foot_nav li:nth-child(even) {background:red}
.foot_nav li:nth-child(odd) {background:yellow}
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
//css
.foot_nav li{//styling}
What do you need it for?
Maybe you should add the class to its parent.
<ul class="foot_nav">
<li></li>
…
</ul>
.foot_nav
{
list-style-type:none;
}
.foot_nav li
{
display:inline-block;
}
<ul class="foot_nav">
<li >Home</li>
<li >Discovery</li>
<li >Subjects</li>
<li >Guide</li>
<li >About us</li>
</ul>
Something like this in JavaScript should do the trick:
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].className = lis[i].className += " foot_nav"
}
Try this
.list-item li{
}
.list-item:nth-child(1){
}
.list-item:nth-child(2){
}
<ul class="list-item">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}
I am looking to make a two-column navigation bar by using a single <ul> with six <li> items:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Three elements on one side, and three on the other; ordered vertically.
Right now, it's easy to do when making two seperate <ul> elements and putting padding/margins between them: http://jsfiddle.net/Baumr/SJcjN/ — but that's not a great solution.
Could also wrap <span> tags around each set of three <li>'s — but is that the only CSS solution?
Looking for some elegant ideas. Thank you!
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS:
li {
width: 50%;
float: left;
padding: 5px 0;
}
They will order like that:
Home About
Team Store
Blog Contact
If that's not a problem, you have a very simple solution.
EDIT:
li:nth-child(even) {
width: 50%;
float: right;
}
li:nth-child(odd) {
width: 50%;
float: left;
}
This will order them in the correct way. not sure how IE will act, but will work in all other browsers.
or you can follow strictly the UL-LI concept, so your html will look like this an you can have as many column as you need:
<nav>
<ul class="menuitem">
<li class="column">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
</ul>
</li>
<li class="column">
<ul>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</li>
</ul>
<ul class="menuitem">
<li class="column">
.....
</li>
</ul>
</nav>
Making a correct and well formated html can make your life easier.
I think that using <span>'s might be the most cross-browser friendly solution.
Unless someone has other ideas? Looking for something cross-browser compatible, as sadly IE doesn't support nth-child(N).
This is not as clean (HTML wise) as I wanted, with these random spans, but here is the HTML:
<nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>
(Notice the span inside the ul — big faux pas in my book.)
And the CSS:
nav span {
width: 50%;
float: left;
}
But that's hardly a good solution... any other ideas?