I am working with Bootstrap tabs and was wondering what the best way is to identify tabs separately so I can style them differently — for example, so that there is a blue tab and a red tab instead of two tabs that look the same.
Here's the HTML just for the tabs: (note: I'm using react as well.)
<ul className="nav nav-tabs">
<li className="active"><a data-toggle="tab" href="#menu1">This is the headline of one article</a></li>
<li className="tab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
And here's the CSS I have so far:
.nav-tabs>li>a {
background-color: #3999C9;
color:red;
font-family:Fira Sans;
}
.nav-tabs {
font-family:Fira Sans;
border-bottom: 1px solid #10122B;
}
So not much, haha. Appreciate any tips, whether it's adding in a class somewhere or whatever.
Well, just use css selectors :
.nav-tabs li:nth-of-type(1) a { ... } // first tab
.nav-tabs li:nth-of-type(2) a { ... } // 2nd
.nav-tabs li:nth-of-type(3) a { ... } // etc
Related
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 using a nav bar from twitter Boostrap.
Great - my question is, how do I get the subsequent tabs to highlight red with the previous tab going grey, as I tab across ?
Here is the HTML:
<ul class="nav nav-tabs">
<li role="presentation" class="active">Job Analysis</li>
<li role="presentation">{{link_to('crews', 'Crews')}}</li>
<li role="presentation">{{link_to('contractors', 'Contractors')}}</li>
</ul>
Here is the css as given by Bootstrap for the active class:
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: red;
}
Here is the css for an inactive tab:
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
You could add your own code to change the active class for the current tab.
In this case it would be:
$(document).ready(function() {
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
});
Check this bootply: http://www.bootply.com/8DULSi0lNV
I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
I am using joomla 3 and bootstrap.min.js
I am creating menu and giving special class in order to change hover, active, visited links and style of the menu.
I could not find how to change active link color of menu.
Suppose I have 2 menu. Home and Contact.
When I am in Home it is red, I want to change this color.
I could change a:active and a:hover.
Here is code;
.topmenu .active a,
.topmenu .active a:hover {
background-color: white;
}
.topmenu > li > a{
color: orange;
font-weight:bold;
}
.topmenu > li > a:hover {
color: black;
background:white;
}
Even I used div to change color of active link.
Here is code
#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
color: orange;
}
#top-menu a:hover{
color: black;
}
Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.
Here is my markup code
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active">Home</li>
<li class="item-138"> Russian </li>
<li class="item-110"></li></ul>
</div>
What do you suggest me to do?
Finally with experiments I found how to capture it.
#top-menu .current a
{
color: orange !important;
}
Thank you everyone for your time and help.
Much appreciated!
In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
Your Navigation Bar As Follows
-Home
-Russia
-Italy
We are on the Italy Page For This Example:
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li>Home</li>
<li>Russian</li>
<li class="activePage">Italy</li><!--Page End User Is On-->
<!--Look UP ^^^^^^^^ Hope this helps :)-->
</ul>
</div>
Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
The reason this worked is because I added !important at the end of the color for that separate class.
.activePage {
color: #0CF !important
}
So to apply this same technique to your other pages it would simply look like this:
Home Page
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="activePage">Home</li>
<li>Russian</li>
<li>Italy</li>
</ul>
</div>
I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.
I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.
For instance,
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
Hope this helps.
For change the current active link color we can use code in external css file or inline css
.active a
{
background-color:#ff0000;
}
// Fix navigation menu active links
$(document).ready(function(){
var path = window.location.pathname,
link = window.location.href
;
$('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
$(function (){
$('nav ul li a.sub-menu').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
Try changing your CSS to .item-109 { color: white !important; }.
Here's a link with more information on !important.
If you want to globally change the link colors (or pretty much anything else), create a customized download: http://twitter.github.io/bootstrap/customize.html
In response to your comment, if you want to override the supplied CSS, you need to create a rule that is more specific. So, either create a selector like #my-custom-container .item-109 .current .active or add a !important to your rule(s) for .item-109 .current .active
first add php code in link
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'index') { echo 'active'; } ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'about-us') { echo 'active'; } ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'contact-us') { echo 'active'; } ?>" href="contact-us.php">Contact Us</a>
</li>
</ul>
then in every page
Please have a look at http://jsfiddle.net/mrto2/nD2eB/.
I've given the
#filters li a:active {
border-top: 2px solid #EB2F26;
color: #EB2F26;
}
for Active font and border color but when we click on some menu, its color and border changes but it turns back while mouse release. So how can we fix this?.
There's no plain CSS way to deal with this, since link:active selector applies to <a>s being clicked. You can approach this by defining a li.active css class and adding it to links dynamically via js.
li a.active {
border: 2px red solid;
}
<ul class="nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<ul>
// Using Jquery
$('ul.nav li').on('click', function(){
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
});