Ir para conteúdo
Fórum CódigoFonte.net
berilson

Menu legal

Recommended Posts

É provavelmente pq vc apenas copiou o código-fonte do link que o berilson passou Na verdade a folha de estilos não está embutida na página, mas em um arquivo externo. Berilson, poste pra gente o tutorial deste menu que vc usa!!!

[]'s!

St Jimmy 2k

Compartilhar este post


Link para o post
Compartilhar em outros sites

cara por ser Css e mt legal msm

e vc me ajudou tava procurando algo semelhante =D

eu ia fazer no fw mais ate fazer mo pe no saco hehehe

esse menuzin e loko vlw!

abraços

ray

Compartilhar este post


Link para o post
Compartilhar em outros sites
Eu coloquei no meu site e não funfou ...

vou passa certinho ok!

essa e a pagina pindipal ou seja a index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus</title>
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li> 
      <li><a href="#">Offices</a></li>  
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 

</ul> 
</body>
</html>
Agora abra outro bloco de notas dreamwaver etc!
body {
    font: normal 11px verdana;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    }

ul li {
    position: relative;
    }
    
li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    }

/* Styles for Menu Items */
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
        
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
        
li:hover ul, li.over ul { display: block; } /* The magic */



salva isso como style2.css <esse serve para você mudar estilo do menu cores etc!
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;


salva esse como drop_down.js

LENBRANDO AKI ONDE VAI TAR BL!

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

<style type="text/css">

@import "style2.css";

</style>

Se caso estiver em uma pasta faz assim

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

<style type="text/css">

@import ".../pasta/style2.css";

</style>

que funfa pelo menos aki funfa =D

que vai funcionar ok!

abraços!

ray

Editado por ray

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ai Ray matou a pau....

agora ninguém tem dúvidas eu acho.......

estamos aki pra isso =D

abraços!

ray

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito bom mesmo esse menu! Muito leve e prático!

Porém, não fui muito bem sucedido na inserção de um sub-menu. Tentei criar um sub-menu logo depois da

<li><a href="#">History</a></li>

Ficou assim:

<li><a href="#">History</a>

<ul>

<li><strong><font size="1" face="Verdana, Arial, Tahoma"><a href="#">Sub-MENU></a></font></strong></li>

</ul>

</li>

Alguém sabe como?

Editado por Zell Dincht

Compartilhar este post


Link para o post
Compartilhar em outros sites

Galera,

esse menu eh otimo mas nao funciona direito no IE7 .. os sub menus ficam sumindo. alguem tem ideia do que possa ser

falow

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×
×
  • Criar Novo...