Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rasp

Menu Pull Down CSS

Recommended Posts

Fala galera!

Vendo que não tinha nenhum post sobre Menu PullDown CSS aqui no fórum, estou postando este simples;

 

 

Arquivo CSS:

 

div.pdmenu { margin: 0; padding: 0; text-align: center; }
div.pdmenu li { width: 120px; height: 30px; margin: 0 -1px 0 0; padding: 0; float: left; display: block; cursor: pointer; line-height: 30px; list-style: none; border: 1px solid #000; }
div.pdmenu a { height: 30px; padding: 0; color:#000; display: block; line-height: 30px; text-decoration: none; }
div.pdmenu li ul { padding: 0; display: none; }
div.pdmenu li:hover ul { width: 120px; margin: 0 0 0 -1px; padding: 0; display: block; }
div.pdmenu li ul li a:hover { background: #999; }

 

HTML:

 

<div class="pdmenu">
					<ul>
						<li>Arquivo
							<ul>
								<li><a href="#">Novo</a></li>
								<li><a href="#">Abrir</a></li>
								<li><a href="#">Fechar</a></li>
								<li><a href="#">Salvar</a></li>
								<li><a href="#">Salvar Como</a></li>
								<li><a href="#">Sair</a></li>
							</ul>

						</li>
						<li>Editar
							<ul>
								<li><a href="#">Voltar</a></li>
								<li><a href="#">Avançar</a></li>
								<li><a href="#">Recortar</a></li>
								<li><a href="#">Copiar</a></li>
								<li><a href="#">Colar</a></li>
								<li><a href="#">Selecionar</a></li>
							</ul>
						</li>
						<li>Visualizar
							<ul>
								<li><a href="#">Codigo</a></li>
								<li><a href="#">Design</a></li>
								<li><a href="#">Informações</a></li>
								<li><a href="#">Outros</a></li>
							</ul>
						</li>
						<li>Modificar
							<ul>
								<li><a href="#">Propriedades</a></li>
								<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr></span></a></li>
								<li><a href="#">Display</a></li>
								<li><a href="#">Meta-Tags</a></li>
							</ul>
						</li>
						<li>Ajuda
							<ul>
								<li><a href="#">Conteudo</a></li>
								<li><a href="#">Notas</a></li>
								<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr> </span>Info</a></li>
								<li><script src="http://www.uoguelph.ca/~stuartr/includes/email.js" type="text/JavaScript"></script></li>
							</ul>
						</li>
					</ul>
				</div>

 

Exemplo Online:

http://scripts.logmania.net/webstandards/menu_pulldown.html

 

Fonte:

http://www.designmeme.com/articles/csspulldownmenus/

 

 

Qualquer dúvida é só postar

 

abssss []'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

bacana kra, simples e descomplicado, ja tinha visto um mont soh q davam voltas e voltas, esse vai direto ao pont xD

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fala Rick.hjpbarcelos,

Pô cara valeu! estamos aqui pra nos ajudarmos né... qualquer coisa é só falar!

 

absss

Compartilhar este post


Link para o post
Compartilhar em outros sites

Falae galera!

Pra quem quiser conferir acabei de colocar o link do exemplo online flw!

Forte abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Parece menu DROP-DOWN, o que diferencia? É que ele é alinhado ao botão que chama ele?

 

Ps.: Muito bom o menu. Boa iniciativa

Opa silverfox,

Cara até onde eu já vi e li sobre é isso mesmo, ao invés de abrir para o lado direito ele simplesmente só desce na direção ao botão 'pai'.

 

A vlws cara sempre que pintar uma solução bacana vou postar! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post


Link para o post
Compartilhar em outros sites

URL ORIGINAL

http://www.designmeme.com/articles/csspulldownmenus/

 

Com Correções para funcionar no IE6

 

hack_ie.htc

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	© 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

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">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Menu PullDown CSS</title>
	<style>
	div.pdmenu + p { clear:both; }
	#article div.pdmenu { padding: 25px 0; margin:0 !important; }
	#article div.pdmenu ul { margin: 0 !important; padding: 0 0 25px 0; list-style-type: none; }
	#article div.pdmenu li  { width:100px; height:30px; margin: 0 -1px 0 0; padding: 0; border:1px solid black; color:black; text-decoration:none; background-color:white; float:left; }
	#article div.pdmenu a { text-decoration: none; display: block; color: #000000; background-color: #ffffff; padding: 5px; }
	#article div.pdmenu a:hover { text-decoration: none; color: #FFFFFF; background-color: #000033; }
	#article div.pdmenu li ul { display: none; margin:0 !important; }
	#article div.pdmenu li:hover ul { visibility: visible; display: block; position:absolute; z-index:1; width:100px; padding: 0; margin:0 !important; border:1px solid black; }
	#article div.pdmenu li li { border: none; }	
	#article div.pdmenu li li a { padding: 2px 2px 2px 10px; }
	</style>
	<!--[if gte IE 6]>
		<style type="text/css">
			html, body { behavior:url('hack_ie.htc'); }
		</style>
	<![endif]-->
</head>
<body>

	<div id="article"><div>
		<div class="post">
			<p>
				<div class="pdmenu">

					<ul>
						<li><a href="#">Arquivo</a>
							<ul>
								<li><a href="#">Novo</a></li>
								<li><a href="#">Abrir</a></li>
								<li><a href="#">Fechar</a></li>
								<li><a href="#">Salvar</a></li>

								<li><a href="#">Salvar Como</a></li>
								<li><a href="#">Sair</a></li>
							</ul>
						</li>
						<li><a href="#">Editar</a>
							<ul>
								<li><a href="#">Voltar</a></li>

								<li><a href="#">Avançar</a></li>
								<li><a href="#">Recortar</a></li>
								<li><a href="#">Copiar</a></li>
								<li><a href="#">Colar</a></li>
								<li><a href="#">Selecionar</a></li>
							</ul>

						</li>
						<li><a href="#">Visualizar</a>
							<ul>
								<li><a href="#">Codigo</a></li>
								<li><a href="#">Design</a></li>
								<li><a href="#">Informações</a></li>
								<li><a href="#">Outros</a></li>

							</ul>
						</li>
						<li><a href="#">Modificar</a>
							<ul>
								<li><a href="#">Propriedades</a></li>
								<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr></span></a></li>
								<li><a href="#">Display</a></li>

								<li><a href="#">Meta-Tags</a></li>
							</ul>
						</li>
						<li><a href="#">Ajuda</a>
							<ul>
								<li><a href="#">Conteudo</a></li>
								<li><a href="#">Notas</a></li>

								<li><a href="#"><span class="caps"><abbr class="uttInitialism" title="Cascading Style Sheets">CSS</abbr> </span>Info</a></li>
								<li><script src="http://www.uoguelph.ca/~stuartr/includes/email.js" type="text/JavaScript"></script></li>
							</ul>
						</li>
					</ul>
				</div>
			</p>

		</div>

</body>
</html>

espero que ajude!

 

 

Rasp, quando postar algum script coloque a fonte do original.

 

Abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem é verdade o nome é PullDown mesmo, mas o estranho que antigamente nem se via esse nome era somente drop-down...para qualquer um tanto para baixo quanto para o lado

a diferença que eu percebi é que o dropdown pode possuir menus, submenus, sub-sub-menus, que nem na página inicial o site http://imasters.com.br

 

ele pode ser da esquerda para direita ou de cima para baixo, a diferença é que terá varios "leveis"

 

já o Pulldown possui somente um e é somente para BAIXO (detalhe interessante Pulldown é o mesmo nome de um exercicio que faço na academia para costaz poiz é o mesmo "movimento") ;)

 

Pull Down = "tração para baixo"

drop down = "Gotas abaixo(confuso hehehe)", na verdade acho que o sentido no inglÊs aqui se refere a cair

"cair abaixo" -- Por isso fiquei confuso ao ler "menu Pulldown" já que os menus dropdown seguem a mesma ideia

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aprendiz,

Apenas esclarecendo esqueci de mencionar a fonte, porém se você observar tem um link no proprio menu referente ao desenvolvedor.

 

Outra coisa... para quem quiser.. dei uma reduzida no css e html do script... já atualizado acima (cods e link)

 

abs

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.