I am trying to do an image change for a mouseover, in a ul navigation. I can't seem to try to get it to work. Here is my code:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
and the css:
ul#nav {
width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto;}
ul#nav li {width: 126px; height: 33px; float: left; padding: 13px 0 0 0;
font-weight: bold; text-align: center; text-transform: uppercase; }
ul#nav li:nth-child(1) {
margin: 0 60px 0 0;
}
ul#nav li:nth-child(2) {
margin: 0 316px 0 0;
}
ul#nav li:nth-child(3) {
margin: 0 60px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0;
}
ul#nav li a {
color: white; text-decoration: none;
}
ul#nav li a:hover {
color: #660066;
}
basically where I have "home" "about" "portfolio" and "contact" I want to replace with an image that then does a mouseover to a different image, is this possible???
Without javascript, you're going to have to use the background css attribute, and then use the :hover pseudoclass to change the image source.
This website gives a fairly comprehensive overview of using the background attribute.
Basically it will be something like:
#nav li {
background: url(images/image1.png) 0 0 no-repeat;
}
#nav li:hover {
background-image: url(images/image2.png);
}
Related
So I have a border-right on my navbar list which looks like this
However I would like it to look this Is this possible without using images instead?
Thanks.
Navbar css
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
height: 15px;
}
.navbar .nav li a {
border-right: 1px solid black;
height: 10px;
line-height: 10px;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Try to set the border-right to the <a> element instead of the <li> element.
Edit 1
Since your border-right is attached to your a element try this:
.nav li { height: 15px; }
.nav li a { height: 10px; }
You can now probably see that the border is smaller than the menu button itself. Just play a little with the heights to see what you want.
Edit 2
Also add this:
.nav li a { line-height: 15px; }
The line-height has to be the same height as the list item.
you may use a pseudo with a border or a single letter
ul {
background:#EBEBEB;
}
li {
display:inline-block;
line-height:3em;
vertical-align:middle;
}
li + li:before {/* do not on first */
content: ' | ';
font-size:0.75em;/* resize it here */
padding:0 1em;
text-shadow: 1px 1px #555;/* or box-shadow or border-style if border used*/
vertical-align:bottom;/* or else */
}
a {
color:#222;
}
a:hover , a.active{
color:#FB853C;
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
I've got a simple list driven navigation that looks like this:
Page 1 Page 2 Page 3 My Account
I need 'My Account' to float right:
Page 1 Page 2 Page 3 My Account
Here's the list:
<nav class="nav">
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>My Account</li>
</ul>
</nav>
I added a float:right to the last list item, and that looked great originally, until I shrunk the screen down a little. But then it forced the first three items down a little, so 'My Account' was still aligned right, but sitting up a little higher than the other three. Like this:
My Account
Page 1 Page 2 Page 3
Edit After:
The actual list is more complex than what I posted above. It's got dropdowns and lots of styling. Here's the CSS:
.nav, .menu {
height: 54px;
}
.nav {
background: #004F9D;
clear: both;
display: block;
position: relative;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
z-index:1000;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
min-width: 160px;
font-size: 14px;
}
.nav ul ul li {
float: none;
position: relative;
}
.nav ul ul li a {
color: black;
}
.nav ul ul li a:hover {
background: #428BCA;
}
.menu {
clear: both;
display: block;
overflow: hidden;
}
.menu li {
clear: none;
display: block;
float: left;
padding: 10px 0;
}
.menu li img {
padding-right:10px;
}
.menu li:hover {
background-color: #00aedd;
}
.menu a, .menu span {
background-repeat: no-repeat;
clear: both;
display: block;
color: #fff;
font-size: 14px;
height: 34px;
line-height: 35px;
overflow: hidden;
text-decoration: none;
}
.menu a {
padding-left: 15px;
padding-right: 15px;
}
.menu span {
padding-right: 15px;
}
Here's a solution using the css alignment property, flexbox. Its a little bit cleaner than using floats because it keeps everything in document flow. Just note it supports IE browsers 9 and up
.menu {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li:not(:last-of-type) {
margin: 0 5px;
}
.menu li:last-of-type {
margin-left: auto;
}
JSFiddle
The best way to go something like this is to divide the entire div into equal parts, and use text-align: center; for the first 3 items, and text-align: right to the last one. Do not use float:left, and float:right because it messes the responsive nature of the site.
I have a dropdown menu on my website, and its acting buggy, the dropdown works, but it shifts my whole website when its hovered over.
code pen http://codepen.io/anon/pen/uaFDj
#nav {
}
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
#nav ul>li:hover>ul {
top:initial;
}
my html
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
it only bugs when its in full screen without ay sidebar stroller. thanks for the upcoming help.
Thank you for the upcoming help and support from everyone.
Without even looking at your code I can tell you why. The width of the dropdown is moving some margin to the right causing the search bar and probably anything else underneath the dropdown to move right.
Just make a <ul> list-style-type: none; with <li> display: inline or block;
Also you're not setting a width to anything but the search bar, which might be another cause.
Try setting a width to your nav.
Hey now just define some css as like this
#nav ul li {
position:relative;
}
#nav ul > li ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
Give max width for #nav and width 100%
#nav{
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
max-width: 858px;
padding: 0;
width: 100%;
}
so that it won't move anymore.
DEMO
why are you giving top:100%;
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; display:none;
}
#nav ul>li:hover>ul {
display:block;
}
UPDATE : to keep a highlighted DEMO
#nav ul li:hover > a{
background-color:#333;
}
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
I have been building a CSS drop down menu and I have a slight snag and wondered if anyone could help me fix this. I have a menu that has this HTML
<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li>This is sub</li>
<li>sub menu item</li>
<li>This is a long sub menu item</li>
</ul>
</li>
<li>Location</li>
<li>another link</li>
</ul>
</div>
Currently when I hover over the main <li> 'Home' it's width expands a lot, I think to accommodate the sub-class menus that I have. How can I stop this from occurring? To achieve something like:
|Home| // Nice short main tab
|A sub menu link |
|Another sub menu link|
As opposed to this that is currently happening (forgive the crudeness of my diagram)
|Home....................| // really long messing up everything tab
|A sub menu link |
|Another sub menu link|
This is my CSS code for the menu:
#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
I have basically the same markup so the following code should work well for what you need.
I left all of the color and image info in case you needed help there too.
#menu {
background: none repeat scroll 0 0 #333333;
border: 0 none;
font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#menu ul {
background: none repeat scroll 0 0 #333333;
height: 35px;
list-style: none outside none;
margin: 0 0 3px;
padding: 0;
width: 100%;
}
#menu li {
float: left;
padding: 0;
}
#menu li a {
background: no-repeat scroll right bottom #333333;
color: #CCCCCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
background: no-repeat scroll center bottom #2580A2;
color: #FFFFFF;
text-decoration: none;
}
#menu li ul {
background: none repeat scroll 0 0 #333333;
border: 0 none;
display: none;
height: auto;
margin: 0;
padding: 0;
position: absolute;
width: 225px;
z-index: 200;
}
#menu li:hover ul {
display: block;
}
#menu li li {
display: block;
float: none;
margin: 0;
padding: 0;
width: 225px;
}
#menu li:hover li a {
background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
height: 35px;
margin: 0;
padding: 0 10px 0 15px;
text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
background: no-repeat scroll left center #2580A2;
border: 0 none;
color: #FFFFFF;
text-decoration: none;
}
The markup is weird man.
First of all, try to structure it a little better than having the <a> for the home link in the same <li> as another <ul>. Can this link be in a separate <li>?
Also, don't wrap the menu in a <div>. Just apply the styling directly to the parent <ul>.