I have a navigation grid, that I want to create rollovers for, using sprites. Thanks to other tips on the site, I managed to get started.
You can check the code here.
<ul id="navigation">
<li class="button_1">Button text</li>
<li class="button_2">Button text</li>
<li class="button_3">Button text</li>
<li class="button_4">Button text</li>
<li class="button_5">Button text</li>
</ul>
#navigation{
display: block;
width: 907px;
height: 296px;
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
}
#navigation li{
display: block;
float: left;
}
#navigation li a{
display: block;
height:296px;
text-indent:-9999px;
}
#navigation li a:hover,
#navigation li a.on{
background-image: url(http://i.imgur.com/WbDp9lf.jpg);
}
#navigation li.button_1 a {width:175px; background-position:0px 0px;}
#navigation li.button_1 a:hover {background-position:0px -296px;}
/*
The problem is - the navigation is two rows of icons. How can I control that only one box is being changed. Currently is works only changing vertical groups.
checking my jsfiddle will show it better i think.
thanks!
this is what you want?
http://jsfiddle.net/ahyv7/2/
i removed a lot of unusefull css... the remaining (good) one is
#navigation {
display: block;
width: 907px;
height: 296px;
}
#navigation li {
display: block;
float: left;
}
#navigation li a {
display: block;
height:148px;
width: 181px;
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
text-indent:-9999px;
background-position:0px 0px;
}
#navigation li a:hover {
background-position:0px -296px;
}
to make you work, you need a sprite with only 1 read and 1 gray rectagle
set width / height to the normal li a display and with background-position:0px 0px you see only the red rectangle... on hover move the background uppper... thats all
Related
I am having trouble with a pop-out menu behaving different in Chrome than in IE or Firefox.
Here is the HTML
<body>
<ul>
<li>Level One
<ul>
<li>Level Two Item One</li>
<li>Level Two Item Two
<ul>
<li>Level Three</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Here is the css
ul {
padding: 0px;
list-style-type: none;
}
li {
background-color: blue;
}
a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}
li {
position: relative;
}
li > ul {
display: none;
}
li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}
li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}
In Firefox and IE Level Three pops out to the right of Level Two Item Two. In Chrome Level Three pops out below Level Two Item Two.
I know it has something to do with making the link a block element, but I want the link to display as an inline-block. Also, I cannot change the HTML. It is coming from a CMS (I have simplified it to illustrate the problem)
Any suggestions would be appreciated.
You've got a couple of colons missing from your CSS, specifically this rule: li:hover > ul, li.sfhover > ul
left 100%; should beleft:100%; and top 0; should be top:0;
I am making a website for a friend and am struggling with the CSS for the menu bar. I've deisgned it as he asked etc., but am having a couple of problems.
1) I can't get it to stretch across the full width of the page. The menu itself should stretch across the whole width of the page, with the width of the page split into 6, and the text in each menu item to be centralised and stay the same size and just add extra black background to accommodate the page width. (Most users who'll be looking at it will be using 1920 x 1080 apparently)
Like so (Ignore the boxes at the top - they were just colour tests):
http://i58.tinypic.com/1z2zkf8.png
2) When I mouseover the menuitems for the submenu, the main menu readjusts itself. How can I stop it doing this, so it stays at a static width for the menu buttons? (i.e. 1/6th of the page width)
3) How can I make it so clicking the main menu will show the relevant submenu and keep it up until there is a click elsewhere on the page (i.e. so you don't have to hold your mouseover to select the submenu)
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<link href="navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Clan
<ul class="subnav">
<li>Really? You made a website for this?</li>
<li>Member Roster</li>
<li>One of us...</li>
</ul>
</li>
<li>Games
<ul class="subnav">
<li>Current Games Rotation</li>
<li>Games You Really Need To Buy</li>
<li>Clan Steam Account</li>
<li>Wargame Decks</li>
<li>Leon's Wheel o' Games</li>
</ul>
</li>
<li>Events
<ul class="subnav">
<li>Thursday Game Night</li>
<li>ILAN</li>
</ul>
</li>
<li>Donate
<ul class="subnav">
<li>Help Us Not Be Poor</li>
<li>Help Us Even If You're Poor</li>
</ul>
</li>
<li>Other Shit
<ul class="subnav">
<li>Links to Shit</li>
<li>Cheap as Shit Games</li>
<li>Stats 'n' Shit</li>
<li>Downloadable Shit</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url("AEnigma_Scrawl/stylesheet.css");
.navbar {
font-family: "AEnigma Scrawl";
font-size: 32px;
text-align: left;
height: 80px;
width: 100%;
font-weight: normal;
text-shadow: 1px 1px #000000;
}
.navbar ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
width: 100%;
}
.navbar ul li {
float: left;
}
.navbar ul li a {
text-decoration: none;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(bg_navbar.png);
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.navbar ul li a:hover , .navbar ul li a:active, .navbar ul li a:focus{
background-image: url(bg_navbar_hover.png);
}
.navbar ul li a.current {
background-image: url(bg_navbar_current.png);
}
.navbar ul li .subnav {
display: none;
}
.navbar ul li .subnav li {
float: none;
}
.navbar ul li .subnav li a {
font-size: 18px;
}
.navbar ul li:hover ul.subnav {
display: block;
position: static;
}
.navbar ul li:hover ul.subnav a {
display: block;
width: 100%;
}
The reason why your menubar isn't stretching across the page is probably because browsers usually automatically add a margin to the html/body. Try setting this css:
html,
body
{
margin:0;
padding:0;
}
Also the reason why your menu bar is shifting is because you're positioning the .subnav ul as static when it should be positioned as absolute. Like so:
.navbar ul li .subnav
{
position:absolute;
}
Positioning an element as absolute means it takes up no space on page so this means it won't push other elements away.
Try adding min-width: 100% on the navbar.
Also change the menu background from image to color.
Working on a menu bar that has counter active css classes. I need the menu bar centered and the drop downs to be under the proper list item. I can get one or the other but not both to work at the same time. The menu bar changes sizes, so putting a static margin left on it will not work. This is what the menu bar should look like but it's not centered.
And this is what happens when i remove the float: left from #mainmenu ul li{}. It's now centered, but the items that belong under the user name are all shifted left.
Why does this happen? and how do i get around it?
html:
<div id="mainmenu">
<?php
if(Yii::app()->user->name)
$display_name = Yii::app()->user->name;
if(strlen($display_name) > 11){
$display_name = substr($display_name,0,9);
$display_name =$display_name.'...';
}
?>
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'My Tickets', 'url'=>array('/ticket/mytickets'), 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Schools', 'url'=>array('/school'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Teams', 'url'=>array('/team'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Games', 'url'=>array('/game'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Users', 'url'=>array('/user'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Tickets', 'url'=>array('/ticket'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Team Placement', 'url'=>array('/tournamentresults'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>$display_name, 'url'=>array('#'), 'visible'=>!Yii::app()->user->isGuest,
'items' => array(
array('label'=>'Edit User', 'url'=>array('/company/index')),
array('label'=>'Log-out', 'url'=>array('/site/logout'))
),
),
),
)); ?>
</div><!-- mainmenu -->
Generated HTML code:
<div id="mainmenu">
<ul id="yw0">
<li class="active">Home</li>
<li>My Tickets</li>
<li>About</li>
<li>Contact</li>
<li>SirRahal
<ul>
<li>Edit User</li>
<li>Log-out</li>
</ul>
</li>
</ul>
</div>
CSS code:
#mainmenu
{
height:33px;
margin: auto;
text-align:center;
}
#mainmenu ul li
{
display: inline;
float: left;
margin: auto;
}
#mainmenu ul li a
{
color: #fbf3e1;
font-size:14px;
padding-top:5px;
padding-bottom:5px;
width:217px;
background: #33332c;
}
#mainmenu ul li ul {
display: none;
position: absolute;
margin-left: -20px;
}
#mainmenu ul li:hover > ul {
display: block;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
The biggest key, in my opinion, to building a CSS dropdown/flyout menu is using absolute positioned elements inside relative positioned elements and where to use them. What's even more important is to understand how these two positioning schemes relate to one another. Once you do, you can build all sorts of dropdown/flyout menus.
You will want to set position: relative to all of your menu li whether they contain a submenu or not. Doing so will not affect their position unless you start using top, right, bottom, left CSS properties.
.menu li {
position: relative;
}
Now you will want to set the position of all ul that are a child of an li in your menu to position: absolute. We also don't want them to show right away so hide them with display: none.
.menu li > ul {
display: none;
position: absolute;
}
Applying position relative to the containing element of an absolute positioned element helps contain the absolute positioned element. Not only that but the absolute positioned element will base it's positioning off of the relative positioned parent element, which is what we want. Setting top: 0 and left: 0 will cause a ul that is a child of an li to start in the same upper left hand location as it's parent elements upper left hand corner.
The two rules I have provided so far are the fundamental building blocks of a dropdown/flyout menu in CSS.
From this point forward it will all depend on your design goals as to what else you need to add to your CSS.
I'm going to (mostly) use generic code the rest of the way in the hopes that yourself and others can build off of the basic principles to obtain your own specific results. That said I will base the rest of the code off of what you have supplied. Some superficial styling like borders will be ignored, you can add that later.
HTML
Here is the HTML I'm going to use. Add in anchor elements as needed.
<ul class="menu">
<li>One</li>
<li>Two
<ul>
<li>Sub Two A</li>
<li>Sub Two B</li>
</ul>
</li>
<li>Three</li>
</ul>
Your top level menu is inline so let's use float: left to do that.
They're also fixed width. You're doing this through your anchor tags <a> which is fine, I'm going to use the li.
Your text is centered.
.menu li {
float: left;
position: relative;
text-align: center;
width: 100px;
}
**SEE EDIT BELOW FOR VARIABLE LI ANSWER**
Since you are using fixed width navigation elements you can center your navigation with margin: 0 auto. Using auto for margin left and right to center an element requires a width to be set! Just add up the full width of your top level li and you'll have your width you'll need to center the navigation. Don't forget to include any padding, margin, border etc. in the width calculation.
My example uses three li at 100px width.
.menu {
width: 300px; /* width of the 3 li */
margin: 0 auto; /* centers ul when width is specified */
}
Now we will position the submenu ul.
For top you need to push the submenu ul down the height of the containing li. I'm going to assume 25px is the height of the li.
For left you want it to start at the same edge as the containing li so use 0.
.menu li > ul {
display: none;
left: 0;
position: absolute;
top: 25px;
}
Now let's display the submenu ul when the parent li is hovered.
.menu li:hover > ul {
display: block;
}
CSS
The final CSS.
.menu {
width: 300px; /* width of the 3 li */
margin: 0 auto; /* centers ul when width is specified */
}
.menu li {
float: left;
line-height: 25px; /* assumed height of li */
position: relative;
text-align: center;
width: 100px;
}
.menu li > ul {
display: none;
left: 0;
position: absolute;
top: 25px;
}
.menu li:hover > ul {
display: block;
}
Here is a jsFiddle with some basic styling that wraps it all together.
There you go! A primer to CSS dropdown/flyout menus. As usual your needs will require some modifications or additions to what I have supplied. If you understand the fundamentals you'll go a long way in developing more in-depth and robust solutions.
**EDIT**
Just noticed you have variable number of li in your navigation. Make the changes where appropriate. It is a combination of relative positioning with percentage positions.
.menu {
float: left;
position: relative;
left: 50%;
}
.menu li {
float: left;
line-height: 25px; /* assumed height of li */
position: relative;
right: 50%;
text-align: center;
width: 100px;
}
/* undo the right positioning for submenu li so it aligns properly */
.menu li > ul li {
right: auto;
}
Here is an updated jsFiddle.
Replace your CSS like this, using your LI elements for styling rather than your A elements:
body {
width:100%;
}
#mainmenu {
display: block;
width:100%;
}
#mainmenu ul {
width:100%;
}
#mainmenu ul li {
display: inline-block;
position:relative;
margin: auto;
width:19%;
background: #33332c;
padding-top:5px;
padding-bottom:5px;
}
#mainmenu ul li a {
color: #fbf3e1;
font-size:14px;
}
#mainmenu ul li ul {
display: none;
position: absolute;
}
#mainmenu ul li:hover > ul {
display: block;
width:auto;
position:absolute;
top:30px;
left:0;
background: #33332c;
padding:10px;
}
#mainmenu ul li:hover > ul li {
display: block;
width:150px;
height:auto;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a {
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
You may need some additional adjustments, but there you have the basics
See fiddle here
I tried solving this using some tips from this site but it doesn't seem to work for me. I have a website http://apartmanimikzaton.com/paintball/index.php, and I want to create a drop down menu like from the navigation.
EDIT: I didn't add it right now, but the thing I want to get is drop down menu text on hover.
This is my navigaton:
<ul class="navigation">
<li id="navigation-1"> O nama </li>
<li id="navigation-2"> Oprema </li>
<li id="navigation-3"> Tereni
<ul>
<li> Lokacija 1 </li>
<li> Lokacija 2 </li>
</ul>
</li>
<li id="navigation-4"> Galerija </li>
<li id="navigation-5"> Cjenik </li>
<li id="navigation-6"> O Paintballu </li>
<li id="navigation-7"> Teamovi </li>
<li id="navigation-8"> Webshop </li>
</ul>
And this is my css:
.navigation {background: url(images/layout/navigation.jpg) no-repeat; width: 980px; height: 57px; margin: 0 0 10px 0; padding: 0;}
.navigation li, .navigation a {height: 57px; display: block;}
.navigation li {float: left; text-indent: -9999em; position: relative;}
.navigation ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display:none; /* hide it */
}
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
I'm doing something wrong so any tips would be appreciated.
I took the time to analyze your code, and here's what I can help you with for now.
First of all, insert these styles into your CSS:
ul.navigation li ul{
background: none repeat scroll 0 0 #000000;
display:none;
padding: 0;
position: absolute;
top: 57px;
width: 117px;
z-index: 6;
}
On the following styles:
.navigation li {
float: left;
position: relative;
text-indent: -9999em;
width: 100%;
}
The text-indent: -9999em; is affecting the text of the drop down menu you want to insert. I suggest you remove it. If you don't wish to display the text over your menu icons, you can simply do it like this on your link:
I don't think this approach will work:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try this instead and see if it works:
.navigation li:hover ul{
display:block;
}
That should at least help you a bit, can't really tell if that's what you are intending to do. Give a response if you manage to accomplish what you wanted.
Cheers,
Artur Balestro
Remove this:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
And Add this
.navigation li:hover ul{ /* show it when mouse is over the parent list item */
display:block;
}
There are some unnecessary styles in there that need cleaning up, but if you're wanting a quick fix:
.navigation > li:hover > ul,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
text-indent: 0;
display: block;
z-index: 999;
background: #fff;
}
I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.