The Design Superhero » css http://thedesignsuperhero.com Design Blog by Aravind Ajith, A UI developer Mon, 30 Aug 2010 07:23:44 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Tutorial to create a pretty cool, simple, horizontal CSS menu http://thedesignsuperhero.com/2008/04/tutorial-to-create-a-pretty-cool-simple-horizontal-css-menu/ http://thedesignsuperhero.com/2008/04/tutorial-to-create-a-pretty-cool-simple-horizontal-css-menu/#comments Fri, 18 Apr 2008 13:10:24 +0000 aravind http://thedesignsuperhero.com/blog/?p=35 This is a beginner level tutorial to create a horizontal CSS menu. Many of the beginners are not aware how simple is to create a pure CSS menu. This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. Check out the demo below..

First of all let us write HTML list for menu. Say we have 8 links, as shown in image, here goes the code..

<ul id=”button”>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>

CSS menu

Now, lets go the CSS part, We used only one ID name here to write CSS code. That is ‘button.’

#button {
padding: 0;
}

The CSS code above will remove the padding which will be there in default for list elements.

I am going to create a horizontal menu now, so lets make the list inline

#button li {
display: inline;
}

CSS menu

Okay, now lets make it look beautiful by adding some styles for anchor tag

#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}

CSS menu

Lets make it more attractive by giving hover effects, we are here going to give a special hover effect ;)

#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

Yeah..! its done! see how simple is to create a CSS menu… A demo..? CLICK HERE!

Easy and fast success in 642-983 is not a dream now. Sign up for pass4sure and get 100% reliable question and answers for 642-533 as well as 350-050 prepared by certified team to help you pass your exams without any difficulty.Similar Posts:

]]> http://thedesignsuperhero.com/2008/04/tutorial-to-create-a-pretty-cool-simple-horizontal-css-menu/feed/ 43 Drop down menu disappears behind SELECT box in IE6 ? http://thedesignsuperhero.com/2008/02/drop-down-menu-disappears-behind-select-box-in-ie6/ http://thedesignsuperhero.com/2008/02/drop-down-menu-disappears-behind-select-box-in-ie6/#comments Fri, 01 Feb 2008 05:44:05 +0000 aravind http://thedesignsuperhero.com/blog/?p=33 Recently I came across a problem in IE6 which my client had reported. We had six SELECT boxes in main page and these SELECT boxes were placed just below the main menu. There were three menu items with drop down just above the SELECT boxes. I have placed everything correctly and finalized it. It was working fine with IE7 and Firefox. But when we checked it in IE6, the drop down menus were displaying behind the SELECT boxes.! I tried Z-Index to fix it- 1, -1, 100, 300.. But it didn’t help me anyway.

Drop down menu disappears behind SELECT box in IE6 ?

Then I asked help to the most helpful thing in the world -google!. Yeah, it gave me lots of forum links with the same problem reported. But none of them had a working solution. I tried a lot, none of the solutions I found was capable to manage six SELECT boxes and three drop downs at a time. At last I found something like below in a blog.

“Windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element. “

That is, in IE6 SELECT box was considered to be a windowed element and they have changed it to a windowless element in IE7. The problem is based on the historical fact that form fields have typically been rendered by the operating system/windowing system, where everything else on the page is rendered by the browser. This for a long time caused problems because the OS rendered form fields would draw on top of everything since the operating system has no idea what elements on the page are being drawn.

So.. What’s the solution..?

We can overcome this problem by using iframe. iframe can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements

All we have to do is to make the drop down menus called in an IFRAME. The IFRAME control has a unique nature in IE6. It can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements. Simply put, you can shim an IFRAME under your DIV. The IFRAME will block out the windowed control. I was not ready to try my luck on Javascript. I just created HTML files with only the drop down items and called it to the main page using IFRAME. I used a simple Javascript to show the menu and CSS to format the menu items.

Here is an example:

HTML PART:

<head>
<script language=”JavaScript” src=”mm_menu.js“></script>
<link href=”./cssDropdown.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<a href=“#” onmouseover=“MM_menuShowMenu(‘ContainerDropMenu2′, ‘Drop2′,0,29);“> DROP-2</a>
<div id=”ContainerDropMenu2“>
<div id=”Drop2” onmouseout=”MM_menuStartTimeout(1000);” onmouseover=”MM_menuResetTimeout();“>
<iframe src=”drop2.html” width=”150px” height=”127px” scrolling=”No” frameborder=”0″ > </iframe>
</div>
</div>
</body>

DROP2.HTML:

<head>
<link href=”./cssDropdown.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”DropMenu1” class=”links“>
<a href=”" id=”Drop1_Item_0” target=”_parent“> FIRST OPTION </a> <br />
<a href=“homevalue_request.php” id=”Drop1_Item_1” target=”_parent“> SECOND OPTION </a> <br />
<a href=“testimonials.php” id=”Drop1_Item_2” target=”_parent“> THIRD OPTION </a> <br />
<a href=“contactus.php” id=”Drop1_Item_3” target=”_parent“> FOURTH AND FINAL OPTION </a>
</div>
</body>

If the DIV has transparent areas, you’ll want those areas to punch through the IFRAME to the page background. There are two ways you can make an IFRAME transparent. The one that works for this situation is to set the style object’s filter property:

iframe.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;

This in effect makes the entire IFRAME transparent, but it will still block out the windowed controls. The other technique, which uses the IFRAME element’s ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency. However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.

I had to spent two days to solve this problem. I have the sample files attached as a zip folder. Please DOWNLOAD and go through it. There are three drop downs in the menu. In DROP1 and DROP2. I have used IFRAME to display it correctly and DROP3 is an ordinary CSS drop down.

Still I’m looking for a better solution. Have a better solution? Please share it with me..


Subscribe for testking CISM training and get certified in days. Also download testking HP0-J33 dumps and testking JN0-342 sample test for practice.

Similar Posts:

]]> http://thedesignsuperhero.com/2008/02/drop-down-menu-disappears-behind-select-box-in-ie6/feed/ 4