I'm trying to build a simple drilldown in Bootstrap. When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.
Here's the basic HTML:
<div class="container">
<ul class="nav nav-drilldown" id="Menu">
<li>
Thing the first
<ul class="collapse" id="a">
<li>child 1</li>
<ul class="collapse" id="a-child-1">
<li>
<div class="row">
<div class="col-md-6">something</div>
<div class="col-md-3">goes</div>
<div class="col-md-3">here</div>
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
And the CSS:
.nav-drilldown:focus {
background-color: #eee;
}
.nav-drilldown li li a:focus {
background-color: #FF0000;
}
.nav-drilldown li a:focus {
background-color: #eee;
}
For the second level, on the text part of the anchor changes background color. I get that you can't set selected on a <li>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.
Level 1:
Level 2:
JSFiddle
I believe this is just a matter of the padding on the anchor tag. At the top level, you have 10px top and bottom padding and on the second level anchor tag, you have no padding. So, if you want similar behavior, you could add:
.nav-drilldown li li a {
padding: 10px 15px;
}
Related
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
I want to centralize the tab's items and the style to be the same, but I cannot modify my css currently.
I want the tab element to takes 100% width(to be stretched) and the li elements to be at the center of the tab element.
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women</li>
<li>Men</li>
</ul>
</div>
</div>
Thanks,
B.
The navbar links are set to float: left by default, you need to reset it to float: none so that text-align: center will have the necessary effect.
Also display: block on the list elements make them stack vertically. Set them to display: inline-block
.centered-tabs {
text-align: center;
}
.centered-tabs .nav-tabs > li {
float: none !important; /* Avoid !important, added for SO snippet priority */
}
.centered-tabs .nav > li {
display: inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women
</li>
<li>Men
</li>
</ul>
</div>
</div>
I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.
Thanks!
JSFIDDLE DEMO
HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and li:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item">Item 1</li>
<li class="lnav_item">Item 2</li>
<li class="lnav_item">Item 3</li>
<li class="lnav_item">Item 4</li>
</ul>
</div>
Also very common to have a tags inside li.
Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
To get rid of a underline use text-decoration: none; and override its default coloring if you wish.
Javascript (jQuery):
It'll be easy to bind clickListener to the items:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If you want to give each of the navigation items a different style, etc, you can achieve it different ways:
jsfiddle DEMO
You can use CSS' nth-child() selector:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index is zero-based, but nth-child starts from one.
The typical HTML5 markup for a site navigation menu would be a nav element that contains an ul element:
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.
NAV elements are simply LISTS.
You don't need to wrap them in anything.
Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>
I'm not surprised the CSS doesn't work, but I hope you get the idea. There are 2 lists and I'm trying to target the first letter of the first a in the first ul. In this example that's the B of Beauty Salons. Can I do this with CSS without changing the HTML?
CSS:
.tab-pane .category-headings ul:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
HTML:
<div class="tab-pane" id="b">
<div class="container-fluid category-headings">
<div class="row-fluid">
<div class="span11 offset1">
<div class="row-fluid">
<div class="span4">
<ul class="unstyled">
<li>Beauty Salons & Therapy
</li>
<li>Blinds
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Book Binders
</li>
<li>Bookkeeping Services
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Builders
</li>
<li>Building Plans
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
FIDDLE:
http://jsfiddle.net/a4644b8h/2/
It works if you set the <a> tag to be a block display element:
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type {
display: inline-block;
}
This is because the :first-letter selector will only apply to block elements, and not inline ones.
Here is an example fiddle.
First you need to change a few of those selectors. You aren't looking for ul:first-of-type. This will select the first ul inside each of the <div class="span4"> divs. Instead you want to target the first div with class="span4", like so:
.span4:first-of-type
Next, basically the same thing, you don't want to target a:first-of-type, this will select the first a tag in each of those li elements. Instead, target the first li, like so:
li:first-of-type
And then target the a tag inside that first li
So, to put all that together:
.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {
}
Also, as Alan mentioned, the parent of the ::first-letter pseudo-element must be a block-level element, so add
.span4 a { /* make this selector as specific as you need it */
display: inline-block;
}
And that should do it. JSFiddle here
I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.
The CSS for my background color is as follows:
body{
background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}
I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.
My navigation HTML is as follows:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
My CSS, of course, styles this header.php.
This is my website.
Thanks in advance!
Change the CSS to this:
nav {
background-color: #fff;
margin: 0px -12.5%;
}
Gives the following result:
If you're not happy with this solution, you are going to need to modify the HTML.
Put an id on the nav tag and style the menu over css.
Html:
<nav id='nav'>
// menu
</nav>
Css:
#nav {
background-color: 'white';
}
I'm pretty sure you just need to set the nav background as white..
in your css:
nav { background-color:#fff; }
Extending the full width:
can also be done with HTML resdesign
HTML
<body>
<nav>
<!-- nav code -->
</nav>
<div id="container">
<!-- all of the rest of your code -->
</div>
</body>
CSS
body { }
nav { background-color:#fff; }
#container {
background-color:#D0D0D0;
margin:0px 10%;
}