menu suspenso não podia ser absolute o local de abrir

taniapaiva · Agosto 20, 2007

Olá pessoal, fiz um menu dinâmico com as dicas do majour... ficou show (em php) porém eu queia q qdo chegasse no fim da tela ao invés de abrir p/ baixo (ninguém vê) queria q abrisse p/ cima... algué me ajuda???Valeu Tania

Guilherme Rambo · Agosto 20, 2007

Hum...Código, link, ...?[]'s

taniapaiva · Agosto 22, 2007

Então, segue o código do menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <script>function IEHoverPseudo() {   var navItems = document.getElementById("primary-nav").getElementsByTagName("li");	for (var i=0; i< navItems.length; i++) {		if(navItems[i].className == "submenu")		{			if(navItems[i].getElementsByTagName('ul')[0] != null)			{				navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#CC99FF";}				navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FAF6F0";}			} //fecha o 1º if		} //fecha o 2º if		else		{			if(navItems[i].getElementsByTagName('ul')[0] != null)			{				navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#CC99FF";}				navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FAF6F0";}			} //fecha o 1º if		} //fecha o else	}  // fecha o for} //fecha functionwindow.onload = IEHoverPseudo;</SCRIPT> <style>UL#primary-nav {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; FONT-FAMILY: "arial"; Z-INDEX: 20; BACKGROUND: #FAF6F0; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 138; PADDING-TOP: 0px}UL#primary-nav UL {	PADDING-RIGHT: 2px;  PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-SIZE: 10px; FONT-FAMILY: "arial"; Z-INDEX: 20; MARGIN: 0px; WIDTH: 138px}UL#primary-nav LI {	PADDING-RIGHT: 2px;  PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; FONT-SIZE: 10px; FONT-FAMILY: "arial"; }UL#primary-nav LI HR {	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; MARGIN: 0px; WIDTH: 134px; FONT-SIZE: 10px; FONT-FAMILY: "arial"; }UL#primary-nav LI A {	PADDING-RIGHT: 2px;  DISPLAY: block; PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; COLOR: #000000; PADDING-TOP: 2px; TEXT-DECORATION: none; FONT-SIZE: 10px; FONT-FAMILY: "arial"; } HTML UL#primary-nav LI {	FLOAT: left; HEIGHT: 1%} HTML UL#primary-nav LI A {	HEIGHT: 1%}UL#primary-nav UL {	DISPLAY: none; LEFT: 134px; POSITION: absolute; TOP: 0px}.submenu {	BACKGROUND-COLOR: #ff0000}UL#primary-nav LI UL LI A {		PADDING-RIGHT: 2px;  PADDING-LEFT: 3px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px}UL.menu LI.submenu UL {	DISPLAY: none; FONT-SIZE: 10px; FONT-FAMILY: "arial"; }UL.menu LI.submenu {	BACKGROUND: right center; FONT-SIZE: 10px; FONT-FAMILY: "arial"; }UL.menu LI A:hover, A:over {	COLOR: #e2144a; FONT-SIZE: 10px; FONT-FAMILY: "arial"; background: "#CC99FF"; TEXT-DECORATION: underline;}</style>

na hora de usá-lo a busca é feita em php, ele é todo dinâmico...

Aguardo dicas pessoal,

taniapaiva · Setembro 17, 2007

segue o código ai galera... direto do exemplo do majour... acho q fica mais fácil p/ chegar onde qro...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[url="http-~~-//december.com/html/4/element/html.html"]<html[/url] xmlns="http-~~-//www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
[url="http-~~-//december.com/html/4/element/head.html"]<head>[/url]
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] 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" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="author" content="Nick Rigby" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="MSSmartTagsPreventParsing" content="true" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] http-equiv="imagetoolbar" content="no" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] http-equiv="Pragma" content="no-cache" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="robots" content="all" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="language" content="pt-br" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="ICBM" content="-22.975781,-43.193082" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] name="DC.title" content="CSS para Web Design" />
[url="http-~~-//december.com/html/4/element/meta.html"]<meta[/url] http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
[url="http-~~-//december.com/html/4/element/title.html"]<title>[/url]Horizontal Drop Down Menus - Parte 3</title>
[url="http-~~-//december.com/html/4/element/script.html"]<script[/url] type="text/javascript">
function IEHoverPseudo() {

var navItems = document.getElementById("primary-nav").getElementsByTagName("li");

for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}

}
window.onload = IEHoverPseudo;
</script>

[url="http-~~-//december.com/html/4/element/style.html"]<style[/url] type="text/css">

body { font: normal 62.5% verdana; }

ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}

ul#primary-nav li {
position: relative;
list-style: none;
}

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

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

ul#primary-nav ul {
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

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

ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }

ul#primary-nav li a:hover { color: #E2144A; }

</style>
</head>
[url="http-~~-//december.com/html/4/element/body.html"]<body>[/url]
[url="http-~~-//december.com/html/4/element/ul.html"]<ul[/url] id="primary-nav">
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Home</a></li>

[url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="menuparent">[url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">About</a>
[url="http-~~-//december.com/html/4/element/ul.html"]<ul>[/url]
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">History</a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Team</a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Offices</a></li>
</ul>
</li>

[url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="menuparent">[url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Services</a>
[url="http-~~-//december.com/html/4/element/ul.html"]<ul>[/url]
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Web Design</a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li>[/url][url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Internet Marketing</a></li>
[url="http-~~-//december.com/html/4/element/li.html"]<li[/url] class="menuparent">[url="http-~~-//december.com/html/4/element/a.html"]<a[/url] href="#">Hosting</a>

Entrar

Arquivado

menu suspenso não podia ser absolute o local de abrir

Recommended Posts

taniapaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Rambo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

taniapaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

taniapaiva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante