I cannot find the site or the name but how would one do this effect from hover without jquery
http://www.gayadesign.com/scripts/tabbed/ - look like this on hover
http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
see how this points up.
?
I want the arrow the be the same color (red) and extend below the list item. I simply flipped the position, (did not work),
Is it margin or padding related?
background: transparent url(media/pointer.gif) bottom center no-repeat;
HI,
If you are talking about the arrow rather than the sliding effect then you can do it like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.test {
margin:0 0 3em;
padding:0;
list-style:none;
zoom:1.0;
}
ul.test:after {
content:" ";
clear:both;
overflow:hidden;
height:0;
display:block;
}
.test li, .test a {
float:left;
position:relative;
background:red;
color:#fff;
}
.test li { margin:0 1px 0 0; }
.test a {
height:2em;
line-height:2em;
padding:0 2em;
color:#fff;
text-decoration:none;
}
.test a:visited { color:#fff; }
.test a:hover { visibility:visible }
.test a:hover b {
position:absolute;
left:50%;
bottom:-10px;
margin-left:-5px;
border-left:10px dashed transparent;
border-right:10px dashed transparent;
border-top:10px solid red;
overflow:hidden;
height:0;
}
.test2 a:hover:after {
content:" ";
position:absolute;
left:50%;
bottom:-10px;
margin-left:-5px;
border-left:10px dashed transparent;
border-right:10px dashed transparent;
border-top:10px solid red;
overflow:hidden;
height:0;
}
</style>
</head>
<body>
<h1>Ie6+</h1>
<ul class="test">
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
<h2>IE8+ (without extra b element)</h2>
<ul class="test test2">
<li><a href="#">List item</a></li>
<li><a href="#">List item</a></li>
<li><a href="#">List item</a></li>
<li><a href="#">List item</a></li>
<li><a href="#">List item</a></li>
</ul>
</body>
</html>
It just uses an extra element to hold the spike which is created from mitred borders.
That works. I forgot to add that I have a submenu so it is not functioning with those edits alone. I tried some edits and it made it undisplayable. I also wanted the parent to stay in a hovered state (as I have) while the submenu(child) is hovered.
here is the code from wp:
.menu {
background-color: #585858;
/*background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
background-image: -o-linear-gradient(top, #585858, #3d3d3d);
background-image: linear-gradient(top, #585858, #3d3d3d);*/
clear: both;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
margin: 0 auto;
}
.menu,
.menu ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
border: 0;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
z-index: 5;
}
.menu li:hover {
white-space: normal;
z-index: 10000;
}
.menu li li {
float: none;
}
.menu ul {
left: 0;
position: absolute;
top: 0;
visibility: hidden;
z-index: 10;
}
.menu li:hover > ul {
top: 100%;
visibility: visible;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu:after,
.menu ul:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.menu,
.menu ul {
min-height: 0;
}
.menu ul,
.menu ul ul {
margin: 0;
padding: 0;
}
.menu ul li a:hover,
.menu li li a:hover {
color: #484848;
text-decoration: none;
}
.menu ul {
margin-top: 1px;
min-width: 15em;
width: auto;
}
.menu a {
border-left: 1px solid #585858;
color: #fff;
cursor: pointer;
display: block;
font-size: 14px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
/*padding: 0 0.9em;*/
position: relative;
text-decoration: none;
/*text-shadow: 0 -1px 0 #000;*/
padding: .3em 1.45em;
}
.menu a:hover {
background-color: #808080;
background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
background-image: -webkit-linear-gradient(top, #808080, #363636);
background-image: -moz-linear-gradient(top, #808080, #363636);
background-image: -ms-linear-gradient(top, #808080, #363636);
background-image: -o-linear-gradient(top, #808080, #363636);
background-image: linear-gradient(top, #808080, #363636);
color: #96ad2d;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
background: transparent url(images/pointer.gif) bottom center no-repeat;
}
.menu li:hover a {
color: #96ad2d;
background: transparent url(images/pointer.gif) bottom center no-repeat;
}
.menu .current_page_item a,
.menu .current-menu-item a {
background-color: #343434;
}
#menu-item-21 a {
text-indent: -999em;
width: 40px;
background: url('images/home-icon.png') center center no-repeat !important;
}
#menu-item-21 a:hover {
background: #EFEFEF url('images/home-icon-active.png') center center no-repeat !important;/*border:1px solid #ccc;*/
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.home .menu .current_page_item a {
background: none;
background-color: transparent;
background-image: none;
filter: none;
}
.menu li li {
background: #fff;
background-image: none;
border: 1px solid #e5e5e5;
color: #444;
filter: none;
margin: -1px 0 1px 0;
width: auto;
}
.menu li li:last-child {
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.menu li li a {
background: transparent !important;
border: none;
color: #444 !important;
font-size: 12px;
font-weight: 400;
height: auto;
height: 20px;
line-height: 20px;
padding: 5px 10px;
text-shadow: none;
white-space: nowrap;
outline-style:none;
}
.menu li li:hover a {
background: #cad790 !important;/*f5f5f5*/
background-image: none;
border: none;
color: #444;
filter: none;
}
.menu ul > li + li {
border-top: 0;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu > li:first-child > a {
border-left: none;
}
Hi,
Do you have a link to the page or at least the html that goes with the above. We need ot have a working example to play around with.
also wanted the parent to stay in a hovered state (as I have) while the submenu(child) is hovered.
You can usually do that by making the item visible while the list is hovered.
e.g. li:hover #elementname{hover rules etc}
In my example you can do it like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test, .test ul {
margin:0;
padding:0;
list-style:none;
zoom:1.0;
}
.test { margin:0 0 3em }
.test:after {
content:" ";
clear:both;
overflow:hidden;
height:0;
display:block;
}
.test li, .test a {
float:left;
background:red;
color:#fff;
}
.test li {
margin:0 1px 0 0;
position:relative;
z-index:2;
}
.test a {
height:2em;
line-height:2em;
padding:0 2em;
color:#fff;
text-decoration:none;
}
.test a:visited { color:#fff; }
.test a:hover { visibility:visible }
.test>li:hover>a b {
position:absolute;
left:50%;
bottom:-10px;
margin-left:-5px;
border-left:10px dashed transparent;
border-right:10px dashed transparent;
border-top:10px solid red;
overflow:hidden;
height:0;
z-index:9;
}
.test2>li:hover>a:after {
content:" ";
position:absolute;
left:50%;
bottom:-10px;
margin-left:-5px;
border-left:10px dashed transparent;
border-right:10px dashed transparent;
border-top:10px solid red;
overflow:hidden;
height:0;
z-index:9;
}
.test ul {
position:absolute;
left:0;
top:100%;
width:10em;
border:1px solid #000;
border-top:0;
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
margin-left:-999em;
}
.test li:hover ul { margin:0; }
.test li:hover { z-index:999 }
.test ul li, .test ul a {
float:none;
display:block;
background:#C3C;
margin:0;
}
.test ul a:hover { background:blue; }
</style>
</head>
<body>
<h1>Ie7+</h1>
<ul class="test">
<li><a href="#">List item<b></b></a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item<b></b></a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item<b></b></a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item<b></b></a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item<b></b></a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
</ul>
<h2>IE8+ (without extra b element)</h2>
<ul class="test test2">
<li><a href="#">List item</a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item</a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item</a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item</a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
<li><a href="#">List item</a>
<ul>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
<li><a href="#">List item<b></b></a></li>
</ul>
</li>
</ul>
</body>
</html>