PDA

View Full Version : Rollover effect arrow



nasyitah08
Feb 23rd, 2012, 03:45 AM
I've been trying to work out this roll over effect on my left navigation. Had a hard time to figure out how to add the right arrow and finally got it. However its on two separate files. I'm quite lost on how to combine them to achieve the rollover effect as shown below:

http://img528.imageshack.us/img528/6108/arrowqt.png (http://imageshack.us/photo/my-images/528/arrowqt.png/)

I have 2 separate files and here is the first file called left_nav4.html

HTML code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Fly-out Vertical Menu</title>
</head>
<body>
<div class="title">Products</div>

<div id="menuwrapper">
<ul>
<li><a href="#">High Power / Brightness LEDs</a></li>
<li><a href="#">High Power LED Modules</a>
<ul>
<li><a href="#">Product 1</a>
<!-- <ul>
<li><a href="#">Sub Product 1</a></li>
<li><a href="#">Sub Product 2</a></li>
<li><a href="#">Sub Product 3</a></li>
</ul> !-->
</li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Standard LEDs</a>
<ul>
<li><a href="#">Faqs</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Where are we?</a></li>
</ul>
</li>
<li><a href="#">Indicators</a></li>
<li><a href="#">LED Arrays & Bar Graphs</a></li>
<li><a href="#">LED Replacement lamps</a></li>
<li><a href="#">LED Lighting </a></li>
<li><a href="#">Development Kits</a></li>
<li><a href="#">Power Management</a></li>
<li><a href="#">Heat Sinks</a></li>
<li><a href="#">Interface Materials</a></li>
<li><a href="#">Joint Compounds</a></li>
<li><a href="#">Thermal Management</a></li>

</ul>
</div>
</body>
</html>


CSS code:


<style type="text/css">

/* Define the body style */
body {
font-family:Arial;
font-size:12px;

}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
background-color:#ffffff;
border-bottom:solid 1px white;
width:200px;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
background-color:#0680AD;
position:relative;
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#0680AD), to(#0680AD));
background:-moz-linear-gradient(#0680AD, #0680AD);
background:-o-linear-gradient(#0680AD, #0680AD);
background:linear-gradient(#0680AD, #0680AD);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

/* We apply the link style */
#menuwrapper ul li a{
padding:5px 10px;
display:inline-block;
text-decoration:none;
}

/* We apply the hover style on the text */
#menuwrapper ul li:hover a{
color:#000000;
}


/**** SECOND LEVEL MENU *** */
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
position:absolute;
display:none;
border: 1px solid #c4c4c4;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */
#menuwrapper ul li:hover ul{
left:200px;
top:0px;
display:block;
}

/* we apply different background color to 2nd level menu items */
#menuwrapper ul li ul li{
background-color:#ffffff;
}

#menuwrapper ul li ul li:hover a{
color:#0680AD;
background-color:#f2f2f2;

}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
background-color:#f2f2f2;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
color:#454444;
display:inline-block;
width:120px;
}

/**** THIRD LEVEL MENU *** */
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
position:absolute;
display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
display:block;
left:150px;
top:0;
}

/* We change the background color for the level 3 submenu */
#menuwrapper ul li:hover ul li:hover ul li{
background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover ul li:hover{
background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
color:#ffffff;
}

/* Clear float */
.clear{
clear:both;
}

.title{
color:#333333;
border-top: 2px solid #0680AD;
background-color:#f2f2f2;
padding-left:10px;
line-height:25px;
width:190px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
margin-bottom:5px;
}

</style>



And this is the file which I'm able to achieve the right arrow:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">

.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#0680AD), to(#0680AD));
background:-moz-linear-gradient(#0680AD, #0680AD);
background:-o-linear-gradient(#0680AD, #0680AD);
background:linear-gradient(#0680AD, #0680AD);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

.triangle-isosceles.right {
margin-right:1000px;
background:#0680AD;
}


/* creates triangle */
.triangle-isosceles:after {
content:"";
position:absolute;
bottom:-15px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#0680AD transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}

.triangle-isosceles.right:after {
top:5px; /* controls vertical position */
right:-15px; /* value = - border-left-width - border-right-width */
bottom:auto;
left:auto;
border-width:10px 0 10px 20px;
border-color:transparent #0680AD;
}


</style>

<body>

<p class="triangle-isosceles right">

</p>
</body>
</html>


Been figuring out how to combine them to achieve the hover effect the whole of yesterday but it was all messed up when i added the codes. Anyone knows how to? I would appreciate it alot!

stevenmw
Feb 23rd, 2012, 07:31 AM
http://jsfiddle.net/Daniel_Hug/ZRtHF/

nasyitah08
Feb 23rd, 2012, 08:04 AM
Thank you again Steve! Its not similar to what I wanna achieve. I've finally got it after 4 days of research! its kinda simple but can very complicating.. Here is how i want it to look like

http://jsfiddle.net/nasyitah08/UvqPc/

However, do you have any idea how to add a spacing on hover so that the arrow and the level 2 have a space in between? Like in the image I posted above?

:confused:

stevenmw
Feb 23rd, 2012, 08:10 AM
Try giving the box that appears upon hovering a margin-left. I'll fiddle with yours and see if I can get it going.

nasyitah08
Feb 23rd, 2012, 08:17 AM
Yup, you're right. However, after adding the margin-left the hover effect is messed up. There's no way to click on the hovered right box, it would disappear when you wanna click on it.

Here is what i added:


#menuwrapper ul li ul{
position:absolute;
display:none;
border: 1px solid #c4c4c4;
margin-left:20px;
}



http://jsfiddle.net/nasyitah08/UvqPc/7/

stevenmw
Feb 23rd, 2012, 08:20 AM
Try
http://jsfiddle.net/UvqPc/19/ -- nevermind.. same problem