I am developing a menu bar. I amm done but left with the hover action. I am looking for the whole background of the menu to change but the menu background only changes behind the text.
Here is the fiddle.
<div class="nav">
<ul>
<li >Zardari</li>
<li>Kutta</li>
</ul>
</div>
Here is the css,
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .active{background:#454545}
.nav ul a:hover{
color:#FFF;
background:#000;
}
Thanks in advance.
Put your padding:10px on your a tag, not the .nav. This way you'll have the entire link area change color from top to bottom. (You also have to add display: block; to your a as well.
.nav a{
color:#fff;
text-decoration:none;
font-style:italic;
margin-right:10px;
padding:10px;
display: block;
}
Fiddle
I think i achieved what you want by using Jquery.
I edited the css in order to remove your attempt of changing the background, that i implemented in Jquery.
CSS:
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
then in the head of your html file include the Jquery library. You can download it and host it on your server or use Google's CDN for the library, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Now in your HTML body add the jquery functions i coded for you:
$("li").mouseover(function () {
$(".nav").css("background-color","#000");
});
$("li").mouseout(function () {
$(".nav").css("background-color","#454545");
});
The background of the nav bar changes when the mouse hover on the li (each button). If this is what you want, it's alright, else if you want something different let me know and i'll change it.
Here you can find a DEMO on jsfiddle
What about this?
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
.nav .item:hover{background:#454545;color:#FFF}
.nav .active{background:#454545}
.nav:hover{
color:#FFF;
background:#000;
}
Related
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I got this problem which i can't figure out.
#menuUL{
font-size:32px;
padding:0;
}
#menuUL li:first-child{
list-style-type: none;
}
#menuUL li{
margin-left:30px;
/*display: list-item;*/
display:inline;
list-style-type:disc;
}
I have a horizontal menu, but i only want the first item to hide it's list style type, the rest needs to show the disc. However then i will put 2 display's in the same li which causes it to display vertically instead of horizontal.
UPDATE.
the html code
<div id="photoMenu">
<ul id="menuUL">
<li>ALL</li>
<li>ARCHITECTURE</li>
<li>PEOPLE</li>
<li>LEGO</li>
</ul>
Try floating the li instead
JSfiddle Demo
CSS
#menuUL{
font-size:32px;
padding:0;
}
#menuUL > li:first-of-type {
list-style-type: none;
}
#menuUL li{
float:left;
margin-left:35px;
}
I'm having trouble with a search box. There are two main issues that I'm having. Firstly, I have tried to create a search bar within a navigation bar and the search bar doesnt match the other elements within the navigation bar.
As you can see, the padding does not match the other elements and the size of the box is off by a couple of pixels.
Secondly, the search box looks fine when the page is maximised (besides the problems mentioned above). However, when the page is not maximised, it does this:
I know these are probably rookie errors and the code is probably sloppy but I'm a university student and this is my first HTML project. I am using XHTML 1.0 Transitional and CSS 2.0 as we arent allowed to use CSS3 or HTML 5 or any scripting languages. If someone could help me out, I'd greatly appreciate it!
This is the HTML code:
<div id="nav_bar">
<div id="inner_nav_bar">
<ul>
<li>home</li>
<li>phones</li>
<li>order</li>
<li>faq's</li>
<li>contact us</li>
<li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
</ul>
</div>
</div>
This is my CSS code:
#inner_nav_bar
{
text-align:center;
}
#nav_bar ul
{
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li
{
display: inline;
}
#nav_bar a:link,a:visited
{
display:inline-block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#search
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#nav_bar a:hover,a:active
{
background-color:#7A991A;
}
In your CSS, you're treating the #search list item very different from the other list items.
I changed many of the lines in the CSS around, so that most of the properties are now in li and don't have to be repeated in the other elements.
One problem was the a elements in the other list items, that had vertical padding. I replaced that with line-height.
#inner_nav_bar {
text-align:center;
}
#nav_bar ul {
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li {
text-transform:uppercase;
display: inline-block;
white-space:nowrap;
color:#FFFFFF;
background-color:#27c645;
border:3px solid #0d6e1f;
text-align:center;
font-weight:bold;
line-height:1.66;
}
#nav_bar a {
display:inline-block;
width:120px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
}
#search {
padding:0 4px;
}
#search input {margin:0;}
#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
background-color:#7A991A;
}
Another problem was the size of the input element. The only way I could get that right with any kind of browser consistency was to increase the line height. If that is not acceptable, you may have to set the height on the list items explicitly, and add overflow:hidden.
See result in jsFiddle.
PS you also had other errors: One input didn't end with />, which is mandatory for XHTML. And you had #nav_bar a:link,a:visited, which did not do what you wanted; you should hae written #nav_bar a:link, #nav_bar a:visited otherwise the style would have applied to all visited links, not just the ones in #nav_bar.
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...