I am trying to build a navigation menu. Here are some pieces.
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
What happens is that li element is not tall enough to show the picture.
Any idea how I can increase a height li element so will show the whole picture?
Thanks
I don't think there's a way to make your li stretch dynamically to the size of your background image. You can easily do the reverse however, set a definite height to your li, then set your background to 'contain'. This scales the image down to fit inside your li without clipping.
Updated jsFiddle
css
li {
height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;
}
span {
position:absolute;
top:140px;
width:100%;
text-align:center;
background-color:rgba(255, 255, 255, 0.9);
padding:10px 0 10px 0;
border:1px solid #656565;
}
Remove background Property "transparent"
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
<style type="text/css">
body { font-family: sans-serif; }
#main-menu .nav-bar { list-style:none; margin-top: 40px; }
#main-menu .nav-bar li { display:inline; padding:0px 30px; }
#main-menu .nav-bar li a {
height:48px;
width:48px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
text-decoration: none;
padding-left: 25px;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
position:relative;
}
.nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
.nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
.nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
span {
position:absolute;
top:50px;
left:0px;
width:100%;
text-align:left;
padding:10px 0 10px 0;
}
</style>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><span>Home</span></li>
<li class="nav-button-assets"><span>Assets</span></li>
<li class="nav-button-alarms"><span>Alarms</span></li>
</ul>
</nav>
The only problem I have is that text center is not fully aligned with a center of an image.
Related
I am trying to add the dropdown menu for my menu, but it doesnt seem to show when I hover over it. Thanks for the upcoming support.
This is my code in a jfiddle: http://jsfiddle.net/nbh2e15y/2/
the css:
#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;
}
and the html code:
<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>
If you add
#nav ul>li:hover>ul {
top:initial;
}
to your CSS, then when the li is moused over, the ul will be restored to its original view, so the dropdown will "appear".
When you do this, you'll notice some shifting. Your CSS is in need of some improvement for readability, but this shifting will be because something along the way is not taken out of the flow of the page, but that's another question.
Try this....
CSS code:
#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;
display:none;
position: absolute;
}
#nav ul li:hover ul{
display:block;
position:absolute;
}
#nav ul ul li a {
color: #fff;
background: #5f6975;
}
#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;
}
This here is my code, what I want to do is that I have to place images right next to the vertical navigation bar without disturbing the order of the list. I tried it many times but I wasn't successful, here is my code
THE HTML PART
<ul class="navbar">
<li>» Computers
</li>
<li>» Storage Media</li>
<li><a href="#" >» Networking Solutions</a></li>
<li>» Security Solutions</li>
<li>» Office Automations</li>
<li>» Gadgets</li>
<li>» Projectors and Display Screens</li>
<li>» Softwares</li>
<li class="lastitem">» Customized Solutions</li>
</ul>
THE CSS PART(describes the behavior of the list only)
.navbar{
list-style-type: none;
margin: 0;
padding: 10 0px;
width: 280px; /* width of menu */
position:absolute;
}
.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.navbar li a:visited, .navbar li a:active{
color: white;
}
.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black;
}
.navbar ul li:hover{
background-color: black;
color: #ff0066;
display:block;
width:200px;
height:200px;
opacity:0.75;
}
.navbar ul li:hover{
padding:5px;
margin:0px;
background-color:#666666;
border-width:1px;
border-style:solid;
border-color:#333333;
}
.navbar li {
border-bottom: 1px solid white;
margin-left: 40%;
}
.navbar {
list-style-type: none;
margin: 0px;
width: 100%;
position: absolute;
}
Take out the position: absolute and add display: block; float:left to .navbar.
And add an image with float: left;.
Fiddle
![enter image description here][1]I have the following CSS navigation that adds an arrow on hover.
How can add an arrow to be visible for the active or on link? i have attached the image as well
Here is my code below
<style type="text/css">
#nav {
margin-top:0;
padding: 12px 0;
margin-left: 0;
background-color: #fafafa;
color: #464646;
-moz-box-shadow: 0 5px 5px #888;
-webkit-box-shadow: 0 5px 5px #888;
box-shadow: 0 5px 5px #888;
}
#nav li {
list-style: none;
display: inline;
margin: 0px;
padding: 0;
padding: 22px;
padding-right: 0;
padding-left: 0;
}
#nav li a {
font-family: Arial;
font-style:normal;
text-transform: uppercase;
text-decoration: none;
color: #464646;
padding: .7em 3em;
border-right: 1px dashed #959595;
}
#nav li a:hover {
background-color: #fafafa;
color: #005596;
font-weight: bold;
}
#nav li:hover {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
}
</style>
HTML
<ul id="nav">
<li id="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Add a Restaurant</li>
<li>Delete a Restaurant</li>
<li>Logout</li>
</ul>
Use a class name instead if an id:
<li class="active">Home</li>
Then you can do:
#nav li.active {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
Just add a background image to css.
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
background: transparent url(images/down_arrow2.png) no-repeat center bottom;
margin: 0;
}
<div id="nav">
<ul id="rightMin">
<li id="selectedmenu" onclick="location.href='index.php'">main</li>
<li onclick="location.href='aboutus.php'">about</li>
<li>contact us</li>
</ul>
</div>
CSS:
#selectedmenu {
display:inline;
float:right;
/*padding: 2px 7px 0px 7px;*/
height: 35px;
background: url('../images/selected.png') repeat-x;
cursor: pointer;
text-align: center;
line-height:35px;
padding: 0 5px 0 5px;
color: white;
}
div#nav ul li {
display:inline;
float:right;
/*padding: 2px 7px 0px 7px;*/
height: 35px;
cursor: pointer;
text-align: center;
line-height:35px;
padding: 0 5px 0 5px;
}
div#nav ul li:hover {
background: #232323;
color:#fff;
}
The element with the ID selectedmenu takes CSS #selectedmenu but when hovering it takes div#nav ul li:hover. how can i make it sticks with #selectedmenu
div#nav ul li#selectedmenu:hover {
add your css rules here...
}
Give selectedmenu a higher precedence:
div#nav ul li#selectedmenu {
...
}
just change it every time you hover it, try this:
div#nav ul li #selectedmenu:hover{ /* the style for #selectedmenu*/ }
hope this helps..
I have a CSS based drop-down menu, which I am implementing into wordpress, however I need help in adding a image on the right side of my links when a user hoovers over a link from the menu. Below is my code and here is a similar effect I've seen done and would like to get the same effect on my menu as well.
Something like this: http://www.clydequaywharf.co.nz/
html
<div class="header">
<div class="nav-holder">
<ul id="nav">
<li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
</ul>
</div>
</div>
css
.nav-holder {
height: 32px;
width: 1010px;
float: right;
position: relative;
}
#nav {
font-family: Arial;
font-size: 12px;
float: right;
margin: 0px 30px 0 0px; padding: 0 0px 0 0px;
color: #FFF;
}
#nav li a, #nav li {
float: left;
text-transform: capitalize;
z-index: 9997;
}
#nav li {
list-style: none;
position: relative;
list-style-position: outside;
}
#nav li a:hover { background:white; color: #666; font-weight: normal; }
#nav li:hover > a { background:white; color: #666; font-weight: normal;}
#nav li a {
margin: 0px 0px 0px 15.2px;
padding: 10px 8px 8px 8px;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
font-weight:normal;
letter-spacing: 0.8px;
z-index: 1006;
/* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); */
/* background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); */
}
#nav li li a:link {
background-color: white;
color: #333;
font-size: 12px;
z-index: 9995;
height:22px;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
#nav li li a:hover {
background: white;
color: #8B7500;
z-index: 9996;
/* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
/* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}
/* Submenu */
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0px 1px 8px 1px; margin: 0px 0px 0px 0px;
}
#nav li:hover ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 15px;
width: 184px;
display: block;
z-index: 5000;
}
#nav li ul li a {
float: none;
letter-spacing: 0.0em;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 12px; /* Move text inside menu */
z-index: 1000;
font-size: 12px;
color: #666;
word-spacing: wrap;
text-transform: lowercase;
*margin-left: -9px;
}
#nav li ul li {
_display: inline; /* for ie6 */
background: url(../images/wordpress.png) no-repeat;
}
#nav li ul li a {
width: 158px;
display: block;
}
/* *** */
/* Sub Sub Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
z-index: 1000;
}
EDIT:
I see what you're trying to do now. Wrap the contents of the in some sort of container, then you can float elements inside of it. I super-dummed-down your fiddle, but the concept still stands. You should be able to implement it in your markup.
HTML:
<ul id="nav">
<li>
<a>Past Projects</a>
<div class="menu-item-container">
<img src="http://lorempixum.com/100/100/" class="menu-image">
<ul class='children'>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul></div>
</li>
</ul>
CSS:
#nav li {
list-style: none;
position: relative;
}
#nav li div.menu-item-container {
position: absolute;
left: 0;
top:100%;
display:none;
}
#nav li:hover div.menu-item-container {
display:block;
}
#nav li img.menu-image {
float:right;
}
#nav li ul.children {
float:left;
}
Here's a fiddle: http://jsfiddle.net/thomas4g/VL3Sz/15/
Hope this helps!
I can't seem to reproduce your menu so I can't give an exact answer
For anyone stopping by, here was my original answer:
you can use the CSS pseudo class :hover (which i'm sure you're aware of) combined with a background-image, like so:
HTML:
<span class="menu-item">My Epic Menu Item</span>
CSS:
.menu-item {
padding:5px;
padding-right:25px;
}
.menu-item:hover {
background-image:url("http://lorempixum.com/20/20/");
background-position:right;
background-repeat:no-repeat;
}
Here's a fiddle if you want to play around with it: http://jsfiddle.net/thomas4g/NQQjX/4/
Please let me know if this isn't want you want, hopefully i can improve the answer.