So i never created a drop down menu before.
my question is how can i a texture for my navigation menu?
i have the html code:
<div id="nav">
<ul class="bar">
<li></li>
<li></li>
<li></li>
<li>Guitars</li>
<ul>
<li>Fender</li>
<li>Yamaha</li>
</ul>
</ul>
</div>
So i want to add a texture to all the navigation menu and submenus how can i do that?
can i use background-image:('images/texture.png'); ?
I have a transparent image and how can i make the navigation menu horizontal?
Thank you very much for your time.
For the background image, use url() (spec):
background-image: url('images/texture.png');
...but I don't see the point if the image is transparent.
To make the menu horizontal, use floating or inline-block elements:
.bar > li {
display: inline-block;
}
or
.bar {
overflow: auto; /* Different than visible, to clear floating */
}
.bar > li {
float: left;
}
I guess it depends on what you want the texture on?
If you just want your submenu to have the texture
It would be something like
ul.bar li ul {background-image: url('images/texture.png');}
You could also drop the background-image to background and add your repeats or center or top or whatever in the short version
ul.bar li ul {background: url('images/texture.png') repeat center top;}
Hope this helps!
Related
I want to make a menu with a colored background. I use the simple "background" or "background-color" on the div containing the of my menu but I don't see any color. I know it's dumb but I'm really stuck..
Here is the HTML :
<header class="menu-top">
<div class="menu">
<ul>
<li><a>Home</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</header>
Here is the JSFIDDLE : https://jsfiddle.net/szf1xksv/
An alternative could be to use:
.menu > ul > li {
display: inline-block;
}
This will preserve the height of the list items.
Since the list items in your menu are floated, the menu loses it's height.
You need to clear the float after the container. A simple way to do so:
.menu:after {
content: "";
display: table;
clear: both;
}
Updated fiddle.
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'
I am trying to include a small image as a separator in my menu and I am having the time of my life (sarcasm). In order to create a menu like below I am using the code under the image.
<ul id="div-menu">
<li class="current">
<div class="menu-fill fill">
<div class="menu-left left">
<div class="menu-right right">
Home
</div></div></div>
</li>
<li>
<div class="menu-fill">
<div class="menu-left">
<div class="menu-right">
About Us
</div></div></div>
</li>
My problem is that I am not able to add the little separator image between the li elements. Any ideas?
list-style plays up on different browsers. the best way to do it is
ul#div-menu li { background: url(/images/seperator.gif) no repeat 0 0; }
the first-child pseudo-class doesn't work on all browsers, so you can apply a 'first' class to the first li and set background to none for that
ul#div-menu .first { background: none; }
note: you will need to use some amount of padding on the li to push the text away from the background image. you can adjust the position of the background image using the last two parameters (which i've set to 0). the first digit is x-axis and the second one is y-axis. so to move the background image 2px to the right and 2px up
ul#div-menu li { background: url(/images/seperator.gif) no repeat 2px -2px; }
Maybe you could set the separator image as the list image:
ul#div-menu li
{
list-style-image: url("/images/separator.gif");
}
ul#div-menu li:first-child /* Disable for the first li */
{
list-style: none;
}