[Resolvido] Menu drop down

Thiago Souza_63114 · Dezembro 22, 2011

Olá galera eu preciso criar um menu drop down mais bem diferente,

e gostaria da ajuda de vocês, preciso criar um drop down duplo, que quando

passa o mouse sobre menu aparece o menu embaixo e quando passou o mouse no Produtos abre outro

menu com os Sub_produtos.

igual o exemplo abaixo:

Link:

http://navepublicidade.com.br/menu.jpg

Então galera preciso de um menu assim eu conseguir uma em um site mais estava muito tenso

o código era muito embolado ai quero ter um mais simples se alguém puder me dar um pequena ajuda

eu tenho conhecimentos css, que é o necessário para esse menu então não vou ter muita

dificuldade em fazer se alguém me dar um pequena ajuda, se alguém tiver pronto melhor ainda.

só lembrando que esse menu tem que ser assim em 100% horizontal e não como os comuns na vertical.

Deste de já fico grado por todos que ajudarem.

João Prado · Dezembro 22, 2011

Já tentou fazer algo?

Se sim, poste o código. Se não, tente primeiro e aponte o que esta acontecendo de errado, ai sim poderemos ajudá-lo.

Giovani · Dezembro 22, 2011

Quem sabe isso ajude: Repente CSS - [Menus]

Thiago Souza_63114 · Dezembro 22, 2011

Galera valeu pela ajuda mais eu consegui fazer :D

Código:

HTML

<!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>Slot Machine Tabs</title>

<link rel="stylesheet" type="text/css" href="droplinetabs.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="droplinemenu.js" type="text/javascript"></script>

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:

droplinemenu.buildmenu("droplinetabs1")

</script>

</head>

<body>

<div id="droplinetabs1" class="droplinetabs">

<ul>

<li><a href="http://www.dynamicdrive.com/"><span>Home</span></a></li>'>http://www.dynamicdrive.com/"><span>Home</span></a></li>

<li><a href="http://www.dynamicdrive.com/style/"><span>CSS'>http://www.dynamicdrive.com/style/"><span>CSS Examples</span></a>

<ul>

<li><a href="#">Activities 1</a></li>

<li><a href="#">Activities 2</a></li>

<li><a href="#">Activities 3</a>

<ul>

<li><a href="#">Water Sports 1</a></li>

<li><a href="#">Water Sports 1</a></li>

<li><a href="#">Water Sports 1</a></li>

<li><a href="#">Water Sports 1</a></li>

</ul>

</li>

<li><a href="#">Activities 4</a></li>

</ul>

</li>

<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>

<li><a href="http://www.javascriptkit.com/"><span>JavaScript</span></a>

<ul>

<li><a href="#">Traveling 1</a></li>

<li><a href="#">Traveling 2</a></li>

<li><a href="#">Traveling 3</a></li>

<li><a href="#">Traveling 4</a>

<ul>

<li><a href="#">Africa 1</a></li>

<li><a href="#">Africa 2</a></li>

<li><a href="#">Africa 3</a></li>

<li><a href="#">Africa 4</a>

<ul>

<li><a href="#">Kenya 1</a></li>

<li><a href="#">Kenya 2</a></li>

<li><a href="#">Kenya 3</a></li>

<li><a href="#">Kenya 4</a></li>

<li><a href="#">Kenya 5</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Traveling 5</a></li>

</ul>

</li>

<li><a href="http://www.cssdrive.com"><span>Gallery</span></a></li>

</ul>

</div>

</body>

</html>

CSS

.droplinetabs{

overflow: hidden;

border-bottom: 1px solid gray; /*underline across bottom of main tabs*/

}

.droplinetabs ul{

font: bold 11px Verdana, sans-serif;

margin: 0;

padding: 0;

width: 100%;

list-style: none;

}

.droplinetabs li{

display: inline;

margin: 0 2px 0 0;

padding: 0;

text-transform: uppercase;

}

.droplinetabs a{

float: left;

color: white;

background: #c76023 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/

margin: 0 4px 0 0;

padding: 0 0 4px 3px;

text-decoration: none;

letter-spacing: 1px;

}

.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{

color: white;

}

.droplinetabs a span{

float: left;

display: block;

background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/

padding: 7px 9px 3px 6px;

cursor: pointer;

}

.droplinetabs a span{

float: none;

}

.droplinetabs a:hover{

background-color: #b05016; /*background color of tabs onMouseover*/

color: white;

}

.droplinetabs a:hover span{

background-color: transparent;

}

/* Sub level menus*/

.droplinetabs ul li ul{

position: absolute;

z-index: 100;

left: 0;

top: 0;

background: #c76023; /*sub menu background color */

visibility: hidden;

}

/* Sub level menu links style */

.droplinetabs ul li ul li a{

font: normal 13px Verdana;

padding: 6px;

padding-right: 8px;

margin: 0;

background: #c76023; /*sub menu background color */

}

.droplinetabs ul li ul li a span{

background: #c76023; /*sub menu background color */

}

.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */

background: #714421;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

Java

/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/

//* Last updated: May 9th, 11'

//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/

*********************/

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image

animateduration: {over: 200, out: 0}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){

jQuery(document).ready(function($){

var $mainmenu=$("#"+menuid+">ul")

var $headers=$mainmenu.find("ul").parent()

$headers.each(function(i){

var $curobj=$(this)

var $subul=$(this).find('ul:eq(0)')

this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}

this.istopheader=$curobj.parents("ul").length==1? true : false

if (!this.istopheader)

$subul.css({left:0, top:this._dimensions.h})

var $innerheader=$curobj.children('a').eq(0)

$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that

$innerheader.append(

'<img src="'+ droplinemenu.arrowimage.src

+'" class="' + droplinemenu.arrowimage.classname

+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'

)

$curobj.hover(

function(e){

var $targetul=$(this).children("ul:eq(0)")

if ($targetul.queue().length<=1) //if 1 or less queued animations

if (this.istopheader)

$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})

if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow

$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})

$targetul.dequeue().slideDown(droplinemenu.animateduration.over)

},

function(e){

var $targetul=$(this).children("ul:eq(0)")

$targetul.dequeue().slideUp(droplinemenu.animateduration.out)

}

) //end hover

}) //end $headers.each()

$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})

}) //end document.ready

}

}

Entrar

Arquivado

[Resolvido] Menu drop down

Recommended Posts

Thiago Souza_63114 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Souza_63114 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante