Arquivo da categoria ‘Menu’

Menu CSS com abas

Abril 23, 2009

Para este menu vou utilizar CSS somente.

<html>

<head>


<style type="text/css">


a

{

text-decoration: underline;

color: black;

background-color: transparent;


}

/* The bar */

#nav { position: absolute; bottom: 0px; right: 10px; }


/* The tabs */

#nav ul { display: inline; margin: 0; padding: 10px 10px 0 1px; list-style: none; }


/* Standard tab */

#nav li { float: left; background:url(tab_off_ns1.gif) no-repeat left top; margin: 0; padding: 0 0 0 5px; }

#nav a {

font-size: 105%;

display: block;

background: url(tab_off_ns2.gif) no-repeat right top;

padding: 8px 15px 0px 8px;

text-decoration: none;

font-weight: bold;

line-height: 1.5em;

color: #444;

}


/* Hover over tab */

#nav li:hover a { color:#333; background:url(tab_on_ns2.gif) no-repeat right top; }

#nav li:hover { background:url(tab_on_ns1.gif) no-repeat left top; color: #000;

}


/* Current tab */

#nav #current { background:url(tab_on_ns1.gif) no-repeat left top; }

#nav #current a {

background:url(tab_on_ns2.gif) no-repeat right top;

padding-bottom:1px;

color:#000;

}


</style>

</head>


<body>

<div id="nav">

<ul>


<li >

<a href="#">MENU 1</a>

</li>

<li >

<a href="#">MENU 2 </a>

</li>

<li >

<a href="#">MENU 3 </a>


</li>

<li id="current" >

<a href="#">MENU 4</a>

</li>

<li >

<a href="#">MENU 5</a>

</li>

</ul>

</div>


</div>

</body>

</html>

tab_off_ns1.gif
tab_off_ns1
tab_off_ns2.gif
tab_off_ns2
tab_on_ns1.gif
tab_on_ns1
tab_on_ns2.gif
tab_on_ns2

Publicado em CSS, Menu | 1 Comentário »

Menu CSS Drop-Down 2.0

Abril 22, 2009

Referencia: Javascript Array

It is a One Level Drop-Down Menu with Timeout effect.

If you are looking for advanced script, see the Multi-Level Drop-Down Menu based on simple treelike unordered list.

Internet has a lot of scripts with the name “Drop Down Menu”. One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first – utterly worthless scripts. The second – too complex heap up and chargeable.

And I just wrote this simple script:

Sample

This menu can be located anywhere on the page:

HTML Code

HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.

Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS Code

<li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

JavaScript Code

Insert this code between your <head></head> tags. Look to the code for the comments:

// Copyright 2006-2007 javascript-array.com

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;

That�s it! All you have to do now is add some hover styles and make it your own. Enjoy!

If you want to use this script on your page, please place link to http://javascript-array.com at one of your pages.

Looking for Multi-Level Menu? See the Multi-Level Drop-Down Menu.

Publicado em CSS, Javascript, Menu | Deixar um comentário »

Menu CSS com background image

Abril 22, 2009

Este menu permite trocar a imagem de fundo e produzir efeito no momento que o usuario passa sobre a opção:

Será utilizado HTML, CSS e Javascript. Vamos ao código, já com as explicações:


<html>
   <head>
   <style type="text/css">

   /* classe para quando o mouse sair da opção */
   .itemOn{
      padding-left:10px;
      padding-top:2px;
      background-image: url(b1.jpg);
   }

/* classe para quando o mouse passar na opção */
   .itemOver{
      padding-left:10px;
      padding-top:2px;
      background-image: url(b2.jpg);
   }

/* Observe que este CSS apenas troca a imagem de fundo de b1.jpg para b2.jpg */
   </style>
   </head>

   <body>
      <table cellpadding='0' cellspacing='0'>
      <tr>
      <td nowrap>

<div class="itemOn"
            onmouseover="this.className='itemOver';"
            onmouseout="this.className='itemOn';">
      <a href="#menuum"> MENU UM </a>
      </div>
      </td>

<td nowrap>

<div class="itemOn"
            onmouseover="this.className='itemOver';"
            onmouseout="this.className='itemOn';">
      <a href="#menudois"> MENU DOIS </a>
      </div>
      </td>
      </tr>
      </table>
</body>
</html>

Bom trabalho !

Publicado em CSS, HTML, Javascript, Menu | Deixar um comentário »