i have this menu:
<div class="nav">
<ul>
<li>HOME</li>
<li>AMORTECIMENTO</li>
</ul>
</div>
the normal apearance:
and this is the apearance when users hover the menu:
So, i dont know how to setup the css, assuming i have biggest names on menu like: "AMORTECIMENTO"
Any tips??
i have tried this, but on small names, the menu is cutting the background...
.nav ul li a{
display:block;
font-size:15px;
color:#000;
padding:5px 7px;
background:transparent;
text-decoration:none;
}
.nav ul li:hover{
background:url(../imagens/bola_fundo_menu.png) center no-repeat;
}
My intention is, when user hover the menu item, on the <li> background, apear the basketball, and on <a> tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of <li> and <a> tags... i think
Here is a quick example using pseudo-elements: http://codepen.io/anon/pen/iwerJ
Using the exact HTML you originally posted, with CSS like this:
.nav {
background: #CCC;
font-family: Helvetica, Arial, sans-serif;
line-height: 48px;
margin: 50px auto 0;
width: 90%;
}
.nav ul:after {
clear: both;
content: '';
display: block;
}
.nav ul li {
float: left;
font-size: 14px;
list-style: none;
padding: 0 10px;
position: relative;
}
.nav ul li:hover:after {
/* Replace background with image */
background: #abc123;
/* Optionally remove radius */
border-radius: 30px;
content: '';
display: block;
position: absolute;
top: 50%; left: 50%;
margin-top: -30px;
margin-left: -30px;
height: 60px; width: 60px;
}
.nav a {
color: #333;
display: inline-block;
line-height: 180%;
padding: 0 4px;
position: relative;
text-decoration: none;
z-index: 1;
}
.nav li:hover a { background: #FFF; }
Just set a hover background. Eg:
div.nav li:hover{
background-image: url('basketball.jpg');
}
EDIT:
You've got a lot more issues than just a background image...
You need to vertically center your nav text set a min-width for the
nav cells so that the left and right of the ball aren't cut off
set a solid white background for the anchor tag so the text is actually visible on hover
set a z-index for the anchor tags that's greater
than the center image so that they are all clickable (right now you
can't click the link to the right of the center)
Good luck. I can't write all of that code out for you, but that should send you in the right direction.
on your nav class all you have to do is write your css like this:
.nav ul li:hover
{
background-image:url('yourimage.jpg');
}
To fix the cut-off images, you can simply put a min-width on your .nav li elements. Make sure the value is at least as wide as your background images.
You'll probably also want to add text-align: center.
Related
This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>
Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:
Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}
you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.
I am trying to make a left nav menu for my web page, which is to look something like the following image:
Here is the jsfiddle of the problem I am facing. http://jsfiddle.net/rzr4Z/
My html looks like the following
<ul id="nav">
<li>First<img src="images/navbar-icons/first.png" />
</li>
<li>Second<img src="images/navbar-icons/second.png" />
</li>
<li>Third<img src="images/navbar-icons/third.png" /> <img
src="images/navbar-icons/third.png" />
<ul id="side-menu">
<li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" />
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 1</li>
</ul></li>
<li>Fourth<img src="images/navbar-icons/fourth.png" />
</li>
</ul>
CSS:
ul#nav {
list-style-type: none;
margin: 10px 0;
padding: 0;
text-align: center;
}
ul#nav li {
font-size: 250%;
line-height: 25px;
padding: 7px 0;
margin: 0;
}
ul#nav li a {
display: block;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav li ul#side-menu {
display: none;
position: absolute;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
top: 400px;
left: 0px;
}
Instead of doing something like,
ul#nav a:hover+img {
display: block;
position: relative;
top: -25px;
}
I had to use different ID's for each of the li elements in the css because each of the rollover image has a different size and width so that I could adjust them individually for their correponding rollover positions. Is using different ID's for each of the menu items the right way to get the desired effect?
The main problem however is when I hover the images for each of the menu items, I start getting a fluttering effect, and the hover effect doesn't look easy to the eyes with that kind of fluttering.
The images for the sub-menu (the sub-menu items do appear, but the img doesn't appear) also doesn't appear when hovering over #third-page menu item.
Any suggestions on how to resolve this fluttering, and getting the correct effects for this menu?
Using different IDs is fine in your case. As for the fluttering problem, I was able to eliminate it by changing this part of your CSS:
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
to this:
ul#nav li:hover #first_id+img {
display: block;
}
ul#nav li:hover #second_id+img {
display: block;
}
ul#nav li:hover #third_id+img {
display: block;
}
ul#nav li:hover #fourth_id+img {
display: block;
}
What was happening was, when you hover over the third link, the size of the image would push the link so that it was centered within the li. And if your mouse happened to be hovering to the left or right of the link once the image appeared, you weren't hovering over the link anymore, so it would disappear, then immediately reappear because now you are again hovering over the link... etc.
Detecting the :hover over the li itself fixes this so that the image appears if you are hovering over the li itself, regardless of if you are hovering over the link, image, or any space around them.
Hope this helps.
The trick to fixing your issue is two things:
1) Make the LI items fixed-width
2) Make the "hover" effect occur on the LI, not on the A
The reason you are experiencing "flicker" is exactly what's been described above. When you are applying the :hover effect to the A tag, and the tags aren't fixed in size, you wind up in some positions where your mouse causes the :hover, the :hover moves the object that caused it out from under the mouse - and that causes the effect to end, putting the object back under the mouse - which causes it again. Endless cause'n'effect which gives you flicker.
By putting the :hover effect on the LI instead, you cause the :hover to be raised whether the mouse is over the A OR the IMG - so when the IMG tag pops visible and everything shifts size, your mouse is still hovering over the LI that contains both elements - and voila - no flicker.
There is another issue caused by your approach, however, due to the size of the images. Because your images are shunting things downward due to their height (big images) - when you get to the bottom of the image, and roll over the next LI - everything will shift out from under your mouse and cause a similar issue. This, however, will generally not cause flicker per-se.
Please see the following update to your jsFiddle.
As you will see, the "height" issue occurs on the "Third" entry. This, too, is solvable by explicitly setting height / width and using images of an exact size - OR (more effectively) by using background: url(...); CSS rules rather than IMG tags - because they are far easier to clip / resize.
If you need an example of some other CSS-based rollover menus with sub-menus, please take a look at this jsFiddle, which demonstrates a more modular approach to dropdown menus and such. It could be modified to suit your needs pretty easily with the use of background graphics.
This problem happens when we do not specify following css attributes:
min-width, max-width, and
min-height, max-height
And carefully using the following css attributes can help:
#parent_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id>#child_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id:hover, #child_id:hover
{
//use borders to find space required for correct width/height
}
So make sure that you add these.
Remember this always:
Never do css without borders, always make sure that you add borders to almost all nodes,
this helps to clearly understand how much space is being occupied and it is more easy to workout errors in css like this
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
ul#nav li {
border:1px solid green;
font-size: 250%;
line-height: 25px;
max-height:200px;
padding: 7px 0;
margin-top: 10px;
max-height:50px;
}
ul#nav li a {
border:1px solid black;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
max-height:50px;
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
}
ul#nav a:hover#second_id+img {
display: block;
}
ul#nav a:hover#third_id+img {
display: block;
}
ul#nav a:hover#fourth_id+img {
display: block;
}
ul#nav li ul#side-menu {
display: none;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
width:48px;
height:48px;
top: 400px;
left: 0px;
}
Now it is not fluttering
Your code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
My code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
Carefully look at my last answer, you have missed significant attributes like height:300px; and width:200px;
Simply specifying max,min-prefixed attributes is not enough, you should add specific height and width settings, only then fluttering disappears.
You can either do:
ul#nav li a{display: block;}
or
ul#nav li{text-align: left;}
so mouseleave doesn't fire on mouseenter
I have a django app that has a horizontal navigation. For some reason I am having problems creating a drop down menu.
Have a look at both of these images
The first image shows the horizontal navigation. On the left side of the image, there is a menu.
The second image shows when I hover over Storage orders (This is the only link that has a drop down menu.) For some reason the right hand side of the tab seems a bit off. This is because the length of the tab for storage, delivery and collection are different due to the number of words. I want to try to make all of these three tabs the same length if possible.
Another problem that I have is the left hand side menu moves to the right when I move my curser over storage orders.
base_menu.html
<ul id="toc">
<li id="current"><span>Home</span></li>
<li><span>Create quote/order</span></li>
<li><span> Item Search</span></li>
<li><span>Storage orders</span><br/>
<ul class="subnav">
<li><span>Delivery orders</span></li><br/>
<li><span>Collection orders</span></li>
</ul>
</li>
<li><span>Delivery list</span></li>
<li><span>Collection list</span></li>
<li><span>Export for invoicing</span></li>
<li><span>Backup data</span></li>
<li><span>Help</span></li>
</ul>
<br/>
base.css
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ul#toc a {
color: #000000;
height: 2em;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
EDIT: #Andres: If I make the change, you can see from the image below, the drop down tab needs to be lowered a bit more. Also, the collection tab is missing as well, but the good thing is the left hand menu does not shift to the right.
Update #Andres: I have removed the tag in the template has made the tab re-appear. Now using margin-top:10px seem to work. Now from the image below, I need to make sure my drop-down box can overlap the delivery header. And I think I may be done.
Try this:
ul#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
position:relative;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
padding-right: 10px;
}
ul#toc a {
color: #000000;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span {
background: url(../images/tab2.png) 100% 0;
background-position: 100% -120px;
}
ul.subnav {
float:left;
display:none;
position:absolute;
}
ul#toc li:hover .subnav {
display:block;
}
since your ul.subnav class is still in the flow of things when it pops up it shifts things on the bottom, if you position it absolutely, relative to the parent li it should fix things up.