for the first time i made a jquery slider using coda slider.
but i want to customize the menu, i want a little a arrow that will show on the top of the li a when you hover it and if it's active.
How will i do that? should i use a image? or can i achieve the effect using css3?
<ul class="navigation">
<li>Sites</li>
<li>Files</li>
<li>Editor</li>
<style>
.navigation {
padding:0px;
margin-bottom:90px;
}
ul.navigation li {
list-style-type:none;
}
ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}
ul.navigation li a:hover {
background-color:#666;
/*there should be some sort of background image here or css3? */
}
.active {
/*there should be some sort of background image here or css3? */
}
<style>
ul.navigation li a:active { }
.selected:hover {
/* you can use CSS3 to make arrows or image both */
}
After analyzing, I observed, that plugin adds .selected class to that li element which is selected. So, you can also use CSS3 to make arrows by using :after and :before psuedo classes with display:none and show only on hover of .selected.
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
/* do whatever */
}
Just in case you have a sub menu, I used the direct descendant selector (>).
Related
The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you
try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}
You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}
Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}
Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.
I've created a rollover image menu in Dreamweaver. The days of the week are images. So is the rollover image that appears on hover. My problem is when you hover over the days of the week, the hover image pushes the text down.
I've mocked together two screen grabs showing the menu before and during it's hover (http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
I read about z-indexes and tried making the menu have a greater number than the hover but that hasn't worked, nor did it help making the position fixed. In the end this is the only CSS I have styling the menu -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css I've shown just one category for ease.
Thank you in advance!!
Using Javacript is overkill for what you're trying to accomplish, just use a sprite image, and manage the rest via CSS
JSFiddle Demo
HTML:
<ul>
<li class="home">Home</li>
</ul>
CSS
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
Try this http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}
Full page on: http://jsfiddle.net/r2FF7/18/show/
I have a nested span in a li element. I want the color of the li only to change when it is hovered over. However
#sortable li:hover:not(.ce){
background-color:#3f0;
cursor:pointer;
}
does not work. The li changes color when my cursor is over the span as well. How can I make the li only change color when it --and not the span-- is hovered over?
http://jsbin.com/alExeVO/16/edit
As your <span> is part of the <li> your code behaves as expected. A hack would be to add a hover to your span so it changes to the original color.
Give the span and the li their own hover features. Check it out.
SEE DEMO HERE
ul{
list-style-type:circle;
text-align:center;
}
ul li{
display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}
I have a CSS drop down that appears on either mouse over or keyboard focus, and though the drop down is accessible with the mouse, when you try to access it with the keyboard the the drop down vanishes (but you still cycle through the items).
Anyone have some ideas on how to keep the drop down visible when accessing the drop down menu items with the keyboard? The CSS code is below.
You can access a demo at: http://testingtesting1.info/joomla-test/
the HTML code is generated by Joomla.
/* Parent menu items */
.h-nav {
width:720px;
height:90px;
}
.h-nav ul {
left:0;
}
.h-nav li {
display:block;
list-style:none;
position:relative;
float:left;
margin-right:10px;
}
.h-nav a {
display:block;
padding:33px 24px;
margin:0;
float:left;
}
.h-nav li a:hover,
.h-nav li a:focus {
background-color:#ffbb58;
}
.h-nav li.parent {
background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
text-align:left;
}
.h-nav li li a:hover,
.h-nav li li a:focus {
text-decoration:underline;
background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
margin:4px auto;
position:absolute;
margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
text-align:left;
padding:10px 5px;
width:220px;
background:url("../../images/standard/bg-submenu.png") repeat;
z-index:9999;
/*rounded corners - rounding only bottom corners */
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
-moz-border-bottom-right-radius:10px 10px;
-webkit-border-bottom-left-radius:10px 10px;
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
margin:auto;
top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
display:block;
padding:2px 25px;
}
If you don't have the ability to access the html and manually add a tabindex, or it is dynamically generated every time, you can use Javascript to add a tabindex to the li elements (this is with jQuery):
$(document).ready(function(){
$('.h-nav>li').attr('tabindex',0);
});
or regular Javascript:
window.onload=function(){
menu = document.getElementById("h-nav")
navElems = menu.getElementsByTagName('li');
for(e = 0; e < navElems.length; e++){
if(navElems[e].parentNode == menu){
navElems[e].tabIndex = 0;
}
}
}
If you can't add a tabindex, I don't believe there is any other way to focus on the li
EDIT 9/21/13
This is not perfect, but it would be usable for keyboard only.
JS Fiddle
For it to work, you can't have a sub-ul that contains the li's with anchors; the anchors must be siblings. This solution uses the ~ selector, which unfortunately only applies to siblings after the targeted element, so it makes the anchors before the focused one disapear.
I am trying to get this transparent background to work. When the nav drops down, I want the entire background of the list to be transparent and the hover to not be transparent.
UPDATE: This is my jsfiddle
Change:
ul#navigation li:hover > a
{
background:#fff;
color:#4dbaf2;
}
to:
#navigation li a:hover
{
background:#fff;
color:#4dbaf2;
}
Example: http://jsfiddle.net/Z8Cu8/5/
Updated:
Then you would also need to add this to your CSS file:
#navigation li ul li a
{
background-color:rgba(255,255,255,.5);
}
Example: http://jsfiddle.net/Z8Cu8/6/
But I'm not really sure if this is what you asked for?