• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

suzy

drop menu

20 mensagens neste tópico

Viva!! desculpem la tar a incomodar, mas tou a aprender a fazer sub menus e nao tou a perceber muito bem  :) fui a um tutorial porreiro

http://www.maujor.com/tutorial/ddownmenu.php

acontece que aparece este codigo:










<ul> 
    <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> 
      </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>






ate aqui tudo bem  :P. de seguida aparece

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px;

}

ul li {

position: relative;

}

mas está em separado do primeiro codigo, o autor deste tutorial esta a ensinar, a minha duvida é aonde coloco estas fracções de codigo, para me dar o tal sub menu  :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O primeiro bloco (com o HTML), poes onde quiseres dentro do body.

Este bloco do CSS

ul {

  margin: 0;

  padding: 0;

  list-style: none;

  width: 150px;

  }

ul li {

  position: relative;

  }

Tens que o por num ficheiro .css, e adicionar isto a seguir a tag <head>

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

:-[ então os varios fragamentos que vejo no tutorial sao varias css?? é isso?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O código que o karva disse podes colocar dentro duma tag <style> que se insere no <head> :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
:) entao exsitem 2 maneiras  :P, o meu problema era no dreamweaver , nao sabia que era possivel redefinir uma  css numa tag  :) thanks, malta  :P
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

:D entao exsitem 2 maneiras  :), o meu problema era no dreamweaver , nao sabia que era possivel redefinir uma  css numa tag  :) thanks, malta  :P

Sempre às ordens :P
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title>



<style type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">




ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}



ul li {
position: relative;
}





li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}


ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}


ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}


li:hover ul { display: block; }





</style>
















</head>

<body>




<ul> 
    <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> 
      </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>

isto nao deveria dar???  :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

esta linha "<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">" tem de estar fora do <style>... passa-a para cima...

outra coisa, apaga essas linhas em branco...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Devia ficar assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}



ul li {
position: relative;
}
  
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}


ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}


ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}


li:hover ul { display: block; }

</style>

</head>

<body>




<ul> 
    <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> 
      </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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
</style>
</head>
<body>
<ul> 
    <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> 
      </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>

tirar as linhas em branco para ficar assim, sem espaços desnecessários entre linhas...

experimenta o código como está acima... a unica diferença é que a linha do meta passou para antes da do script...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
:) ja da alguma coisa, outra duvida se que quiser colocar java script em que parte do dreamweaver  coloco??
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem tive a ver o tuturial e decidi fazelo uma vez que tb ando aprender CSS por esse site

fica aqui o meu resultado pode ser que ajude :)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" >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;</script>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
} 
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
} 
li:hover ul, li.over ul { 
display: block; }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</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> 
      </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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

como ando a fazaer uma palicação em php, esse java sript poderia ser em php? certo? :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não sou a pessoa certa para de dizer isso pois ainda sou verde nisto tudo, no entanto axo que sim apesar desse javascript como deves ter lido serve para "corrigir" o IE, sem esse parte javascript este menu n funcionava no ie so em outros browsers  é so  o que posso ajudar :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

código javascript insere-se em tags <script> também no <head>. Quanto à funcionalidade daquele bocado de código, o que faz é alterar o atributo class do elemento :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nop, o javascript é executado no cliente, e tem acesso á uma série de coisas que o PHP (executado no server) não tem, neste caso as classes dos elementos HTML.

EDIT: Malvada cache, não me mostrou a segunda página e agora faço figura de urso!!  :-[

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Nop, o javascript é executado no cliente, e tem acesso á uma série de coisas que o PHP (executado no server) não tem, neste caso as classes dos elementos HTML.

EDIT: Malvada cache, não me mostrou a segunda página e agora faço figura de urso!!  :-[

LOL :) Existe um botão que serve para apagar o post :P
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora