Jump to content

  2. →
  3. →
  4. →

Photo

Menu Dropdown

Started By Josy, 06/02/2006, 13:55

  • Faça o login para participar
20 replies to this topic

#1 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 06/02/2006, 13:55

Gente, é a primeira vez q estou mexendo com CSS então nao sei como montar esse esquema da pagina aqui:

http://www.maujor.co...l/ddownmenu.php

se precisa d uma tag ou se fica tudo ele fica salvo como .html, sempre trabalhei com php por isso a minha duvida, to querendo montar um menu q passando o mouse em cima apareça tipo um submenu automaticamente...

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">


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

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;
}

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

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

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;

li:hover ul, li.over ul {
display: block; }

<ul id="nav">
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

</body>
</html>


Se alguem puder me dar uma mão nisso agradeço..

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#2 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 06/02/2006, 14:26

Oi!

Vc pode fazer de duas formas: criar um arquivo apenas para o css; ou incluir o css no arquivo.html
Eu prefiro fazer um arquivo separado para o css e chamá-lo nas páginas.

Vamos lá:
config.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;
}

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

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

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;

li:hover ul, li.over ul {
display: block; }

<ul id="nav">
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

arquivo html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="config.css" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">


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

</body>
</html>

Vê aí e qualquer coisa, posta :)

boa sorte!

Edição feita por: Andreia Regina, 06/02/2006, 14:29.

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#3 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 06/02/2006, 15:56

Montei conforme vc postou anteriormente, e reli o artigo mas nao deu certo, os sub menus nao aparecem qdo se passa o mouse em cima do menu principal... o q pode estar errado nessas funções??

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#4 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 07/02/2006, 10:55

Oi, Josy!

Eu testei usando exatamente o mesmo código e funcionou, olha só:
teste do menu

Segue os códigos:
config.css
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; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

Ele utilizou um arquivo para o código js separado:
config.js
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;

e o arquivo 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" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="config.js"></script>
<link rel="stylesheet" type="text/css" href="config.css" />
<title>Untitled Document</title>
</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>

Qualquer coisa posta novamente :)

Abraços

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#5 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 07/02/2006, 11:57

Ah obrigada, deu certo aqui pra mim sim... uma pergunta o menu.html eu posso implementar com php? nao sei se estou perguntnaod uma grande bobagem, mas tipo se eu quero fazer um menu q consulta o bd como eu poso fazer??

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#6 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 07/02/2006, 12:17

Legal que funcionou, não estávamos separando o css e o javascript :(

Pode incluir codigo php sim, só terá que renomear para menu.php.

Qualquer coisa conta com o fórum ;)

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#7 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 07/02/2006, 12:31

Vlw de novo... depois q ficar pronto o código eu posto aqui pra quem quiser dar uma olhada...

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#8 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 07/02/2006, 14:33

Ficou assim::
<ul id="nav">
<?
$consulta_rp = $conn->Execute("SELECT DISTINCT rp from tabela");
$num_consulta = $consulta_rp->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta_rp->fields['rp'];
echo "<li><a href='#'>".$rp."</a></li>";
$consulta_rp->MoveNext();
$controle++;
}
?>
<ul>
<?
$consulta_est = $conn->Execute("SELECT estabelecimento from tabela where rp ='rp'");
$num_consulta2 = $consulta_est->RecordCount();
$controle2 = 0;
while ($controle2 < $num_consulta2)
{
$est = $consulta_est->fields['estabelecimento'];
echo "<li><a href='#'>".$est."</a></li>";
$consulta_est->MoveNext();
$controle2++;
}
?>

Estou seguindo a sintaxe do drop down em CSS mas a segunda consulta q seria para o sub menu nao da certo

<li><a href="#">MENU
<ul>
<li><a href="#">SUBMENU</a></li>
</ul>
</li>

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#9 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 07/02/2006, 14:54

Oi!

Mas ele retorna o que?
Não retorna o conteúdo dos submenus?

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#10 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 07/02/2006, 15:01

isso, nao aparece nenhum submenu, como se dessa forma ele nao reconhecesse o <ul> q está no meio do codigo php

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#11 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 07/02/2006, 15:05

Mas ele retorna as opções do submenu?

Insere um echo para ver se ele retorna as opções, não precisa montar no menu.

;)

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#12 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 07/02/2006, 16:10

É o seguinte a segunda consulta está sendo feito corretamente, mas como eu quero fazer a segunda consulta conforme a opção da primeira ela deveria estar dentro do primeiro while... só q com aquele <ul> q significa o começo do sub menu nao consigo fazer com q o segundo while fique dentro do 1°.

ficou assim o código:

<ul id="nav">
<?

$consulta_rp = $conn->Execute("SELECT DISTINCT rp from tabela");
$num_consulta = $consulta_rp->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta_rp->fields['rp'];
echo "<li><a href='#'>".$rp1."</a></li>";
$consulta_rp->MoveNext();
$controle++;
}
echo "<ul>";
$consulta_est = $conn->Execute("SELECT estabelecimento from tabela where rp ='$rp'");
$num_consulta2 = $consulta_est->RecordCount();
$controle2 = 0;
echo $consulta_est;
while ($controle2 < $num_consulta2)
{
$est = $consulta_est->fields['estabelecimento'];
echo "<li><a href='#'>".$est."</a></li>";
$consulta_est->MoveNext();
$controle2++;
}

?>

</ul>

Entao tenho dois problemas aqui para q a segudna consulta seja correta o segundo while deveria ficar dentro do 1°, mas como tenho um <ul> q inicia o sub menu nao consigo fazer isto, e mesmo assim e sub menu nao está aparecendo na tela como um menu bonitinho e sim aparece só o escrito normal fora da tabela... se vc nao entender me fala, pq tah enrolado d explicar mesmo

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#13 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 08/02/2006, 09:17

A parte do php, das consultas no bd já está ok, o único problema agora é a parte do CSS, nao estou conseguindo escrever o sub menu corretamente dentro da tabela conforme o menu principal.. o código está assim...


$consulta_rp = $conn->Execute("SELECT DISTINCT rp from tabela");
$num_consulta = $consulta_rp->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta_rp->fields['rp'];
echo "<li><a href='#'>".$rp."</a>";
$consulta_rp->MoveNext();
$controle++;
}

Essa 1ª consulta monta o menu principal corretamente

$consulta_rp2 = $conn->Execute("SELECT DISTINCT rp from tabela ");
$num_consulta2 = $consulta_rp2->RecordCount();
$controle2 = 0;
while ($controle2 < $num_consulta2)
{
echo "<ul>";
$rp2 = $consulta_rp2->fields['rp'];
$consulta_rp2->MoveNext();
$controle2++;
$consulta_est = $conn->Execute("SELECT estabelecimento from tabela where rp ='$rp2'");
$num_consulta3 = $consulta_est->RecordCount();
$controle3 = 0;
echo $consulta_est;
while ($controle3 < $num_consulta3)
{
$est = $consulta_est->fields['estabelecimento'];
echo "<li><a href='#'>".$est."</a></li>";
$consulta_est->MoveNext();
$controle3++;
}
echo " </ul>";
}
echo "</li>";
?>

Essa segunda consulta é para montar o sub menu conforme a primeira seleção, só q eu refiz a primeira seleção por causa q a segunda deve estar dentro do while do primeiro select ... tomara q me entendam nessa parte... dessa forma q está, a duas consultas estao certas, mas o sub menu nao fica posicionado corretamente dentro do menu principal, com certeza a posição do <ul> e <li> estão incorretos, mas tentei seguir a sintaxe do CSS q seria:

<li><a href="#">MENU</a>
<ul>
<li><a href="#">SUB-MENU</a></li>
</ul>
</li>

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________

#14 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 08/02/2006, 09:32

Oi Josy!

Como é uma tabela só tenta fazer uma só consulta e dentro do while coloca se for menu, imprime o menu, se for submenu imprime o submenu.

Posta o script e a tabela para nós, caso não dê certo.

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum

#15 Josy

Josy

    :*

  • Usuários
  • 662 posts
  • Sexo:Feminino
  • Localidade:Porto Alegre/RS

Posted 08/02/2006, 10:01

Fiz com duas consultas.. ficou dessa forma:

<ul id="nav">
<?
$consulta_rp = $conn->Execute("SELECT DISTINCT rp from tabela");
$num_consulta = $consulta_rp->RecordCount();
$controle = 0;
while ($controle < $num_consulta)
{
$rp = $consulta_rp->fields['rp'];
echo "<li><a href='#'>".$rp."</a>";
$consulta_rp->MoveNext();
$controle++;
echo "<ul>";
$consulta_est = $conn->Execute("SELECT estabelecimento from tabela where rp ='$rp'");
$num_consulta2 = $consulta_est->RecordCount();
$controle2 = 0;
echo $consulta_est;
while ($controle2 < $num_consulta2)
{
$est = $consulta_est->fields['estabelecimento'];
echo "<li><a href='#'>".$est."</a></li>";
$consulta_est->MoveNext();
$controle2++;
}
echo " </ul>";
}
echo "</li>";

?>

Dessa forma o sub menu fica ao lado do menu corretamente conforme o menu, mas nao fica dentro da tabela, daí com certeza é a posição do <ul> e <li> está errado... ve se assim fica melhor pra vc entender...

___________________________________

Josy R.L.
Grupo Plyme
www.plyme.com.br
___________________________________
Voltar para CSS & Semântica (Tableless)


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq