Develop Reference

Pure CSS & JS drop down menu - onmouseover issue

I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?

First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!

CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?

Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.

#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover

My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).

if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x

The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.

Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.

PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.

Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it

You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}

just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work

Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.

The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

rounded corner menu item in css without CSS3!

I try to achieve the following output:
i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:
HTML:
<div class="menu">
<ul>
<li>registration</li>
<li>Contact</li>
<li>Sch's direc</li>
<li>faculty & staff</li>
<li>Campuses</li>
<li>History</li>
<li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
<li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
</ul>
</div>
CSS:
.menu ul{
list-style:none;
}
.menu li{
float:right;
background:url('images/menuBGrepX.png') repeat-x ;
margin-right:10px;
text-transform:uppercase;
}
.menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 2px;
float:left;
}
.menu li.selected{
background:#A07E4E;
}
.menu li:hover{
background:#A07E4E;
color:#313131;
}
As you can expect the background color of li is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : http://www.examplecode.info/enam/pleasehelp/.Thanks in advance.

Use jQuery round corner plugin for cross browser round corners.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1

I'd love to know why your client asked you not to use CSS3 rounded corners? It sounds like a very short-sighted request. The only possible reason for specifying that is because certain browsers (IE6/7/8) do not support it.
In all other browsers, CSS border-radius is by far the best solution for rounded corners. All other solutions have major issues. There's a reason why the CSS3 solution is suddenly very popular, and it's because it solves all the problems that people were struggling with previously.
There are a number of solutions which allow CSS3 border-radius to be used by browsers which support it, and fall-back to Javascript for IE6/7/8. I would seriously recommend one of these solutions. The best one that I know of is CSS3Pie, but there are a number of others.

Is JavaScript allowed?
give all the elements an id, and add to the link an onMouseOver() and onMouseOut() event, where you call getElementById() on each of your borders and change them with a src="images/newimage.jpg".

In your css for hovered list element you must change the image too. For example :
.menu li:hover {
background:url('images/menuBGrepX_hover.png') repeat-x ;
color:#313131;
}
You can't change the color of the image only with CSS, you must change the image entirely.

Making an entire tab clickable

I'm making a template that is relying on a lot on a tabbed interface and in order to make it a bit more intuitive, I want to make sure that a user can click anywhere in the tab in order to activate it, instead of having to click the text inside the tab. In order to achive this, I'm currently doing this:
<div class="tab" onclick="javascript:window.location='http://example.com';">
tab text
</div>
for all the tabs I create. Does anyone have a more efficient way of doing this that they'd like to share with me/the community?

It would be more accessible if you did this:
<div class="tab">
tab text
</div>
Setting the <a> to block lets it fill the width, and you can give it height, padding etc. just like a <div>. You could even do away with the <div> entirely.
tab text
Of course, you'd add display: block; to .tab {} but you get the idea.

It's better in terms of semantics and compatibility to modify the <a> tag with CSS to do this, you could try something like this:
a.tab { display:block; }
And then also set other relevant attributes like the width/height, background color, etc for that.
Then instead your HTML looks like this:
<a class="tab" href="http://example.com">tab text</a>

Make your a tags block-level elements and put your tab padding on the link instead. For example, if you have…
<style type="text/css">
div.tab {
float: left;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
…then change it to this…
<style type="text/css">
div.tab {
float: left;
padding: 0;
}
div.tab a {
display: block;
padding: 10px;
}
</style>
<div class="tab">tab text</div>
This will cause the link to take up the entire "body" of the tab, so you can click anywhere on it.

PPS: the short answer was, you can turn a A tag to display "block" mode, and add any padding, and that padding will catch the clicks. Floating the element (float:left, float:right) is an implicit "display:block". An "inline" element (such as SPAN) also uses padding to determine the area which gets the background image; but without affecting the layout.
The simplest way to do it would be something like this:
ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }
<ul class="tabs">
<li>Lorem</li>
<li>Ipsum</li>
...etc...
</ul>
<div class="clear"></div>
If you use the same width for each tab (depending on longest text in it), then you can even use a single gif background image:
ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }
The more advanced, classic way of doing tabs that adapt to varying font sizes and can use custom imags for the corners and filling is "Sliding Doors" :
http://www.alistapart.com/articles/slidingdoors/

Since you're opening up a new window, this is about as efficient as you're going to get, unless you want to put it into a function to shorten it for typing purposes.

Instead of using a <div/> tag, why not use an <a/> with appropriate styling to match what is currently applied to the <div/>? That way you can use the href attribute of the anchor rather than resorting to JavaScript to direct the user.

As mentioned by John Rasch, making a javascript function for typing purpose could help you, but also... dont make me think! If its clickable, show it with cursor: hand in the css!!!

how about:
<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
$(".tab").click(function(event){
window.location='http://example.com';
});
});
</script>
...
<div class="tab">
tab text
</div>

There are two techniques to achieve this
inline li + a
and
float li + block a
summariezed here
http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm