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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...

×
×
  • Criar Novo...