I have a navigation menu and when i click on any menu its background as of home item does not remain selected i tried my best and also did googling but could not solve
my navigation menu is as
enter code here
<ul id="navigation">
<li id="selected" style="width: 90px">Home</li>
<li class="hov" style="width: 130px">Get Help</li>
<li class="hov" style="width: 90px">Pricing</li>
<li class="hov" style="width: 90px">Contact</li>
<li class="hov"><a class="hov" href="Disclaimer.aspx">Disclaimer</a></li>
</ul>
enter code here
and its CSS is as:
#navigation
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
width: 570px;
border: 0px solid red;
font-size: 16px;
margin-top: -30px;
}
#navigation li
{
float: left;
width: 150px;
height: 40px;
margin-left: 3px;
text-align: center;
border-radius: 5px;
padding-top: 0px;
border: 0px solid black;
position: relative;
border: 0px solid black;
display: block;
}
.hov a
{
color: black;
}
#navigation li a
{
border: 0px solid black;
height: 30px;
display: block;
text-align: center;
padding-top: 8px;
text-decoration: none;
border-radius: 5px;
}
#selected a
{
background-color: #097Abf;
color: White;
}
#selected a:hover
{
background-color: #216894;
color: White;
}
.hov a:hover
{
color: #097Abf;
background: url('supimages/field-bg.gif') repeat-x scroll 0px bottom #FFF;
}
I just changed one or two things to show you my approach, should be fairly simple for you to understand this as you got this far.
I added a class of .active (your old selected)
#navigation a.active
{
background-color: #097Abf;
color: White;
}
And I added the following Jquery to add and remove that class from the link when you click on it.
$("#navigation a").click(function(){
$("#navigation a.active").removeClass("active");
$(this).addClass("active");
});
HERE IS A FIDDLE
Related
On the main page of my site there are 4 hyperlinks that I want to appear on every page in the same way. Except I want the link of the page I'm on to be the same color as when I put my mouse on it.
I thought I could get that with this code:
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
Problem is that it keeps the black background color with white font color and it goes under the other links and not inline with them.
But I think that it's a bad practice to place the link in the "div" in this situation. You can simply register a class for the link and compose styles for this class.
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact a {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
The links were all horizontally aligned until i put one of them in it's own div to change it's color when i'm on the page it is linking to.
Now i can't get him to go back in line.
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact a {
background: white !important;
color: black !important;
display: inline-block !important;
}
You need to set display: inline-block on #contact, not #contact a.
JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me
One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>
I have a navigation bar with four links. I want to remove the extra space to the left of "Projects" and the the right of "Contact". It appears to be part of the unordered list, and not padding or margin.
Here is the fiddle http://jsfiddle.net/95g12kpe/
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li>Projects</li>
<li>Schedule</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: -4px;
margin-right: -4px;
}
.navbar li {
position: relative;
display: inline;
margin-bottom: 0;
margin-left: -20px;
}
.navbar li:hover {
color: #000033;
}
.navbar a {
display: inline-block;
padding-right: 25px;
padding-left: 25px;
text-decoration: none;
line-height: 6.5rem;
color: #222;
font-size: 1.6rem;
font-weight: 600;
}
.navbar a:hover {
color: #006699;
background-color: #000033;
}
It is a block element, so it has width 100% by default, set it to display: inline-block; and it should be fine.
http://jsfiddle.net/95g12kpe/1/
Set a width attribute to your .navbar ul, and to keep it centered, set your horizontal margin attributes to auto, like this for example :
.navbar ul {
list-style: none;
background-color: #fff;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
}
My navigation bar currently is scrunching all my text together. I have "headers" for the dropdown list, and the headers aren't forcing a line.
The HTML looks like this:
<li><p>Services</p><ul>
<li id="ITServices"><p>IT Services</p></li>
<li>Portals, Collaboration & Workflows</li>
<li>Business Intelligence & Dashboards</li>
<li>Mobile Development</li>
<li>Custom Application Development</li>
<li id="healthcare"><p>Healthcare Services</p></li>
<li>EMR, ICD 10 and Healthcare Consulting</li>
</ul></li>
CSS looks like this:
#healthcare p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
#ITServices p {
width: 280px;
margin-left: 0px;
padding: 0px;
display: inline;
}
.navbar li:hover ul {
left: 15px;
top: 40px;
background: #7FBA00;
padding: 1px;
width: 280px;
border: none;
text-align: left;
}
.navbar li:hover ul a {
margin: -7px -10px -7px -15px;
text-align: left;
padding: 0px 0px 0px 10px;
display: block;
font-size: 11px;
width: 259px;
line-height: 25px;
color: #000;
background-color: #F0F0F0;
text-decoration: none;
border-left: 10px solid #7FBA00;
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.navbar li:hover ul a:hover {
background: #7FBA00;
border-left: solid 10px #fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
width: 260px;
}
Ahhh! Right? I'm trying to get it to all display in a list with basically line breaks after each li element. Help?
Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.
Your use might be the following, so try this
li > ul li { display: block; }