Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Suzuki Vitara vs Ford Puma

Componenta display TV LCD

Ce va ingrijoreaza sau va displac...

Rotunjirea mediilor
 Recomandare Cablu circuit si Tabl...

Instalare masina de spalat vase

Mașina de spalat vase pentru...

Problema tv cu android
 Ați pica in aceasta propaganda a ...

Stick-ul nu functioneaza la navig...

Ce fotovoltaice ati cumpara/inves...

Conectare Amplificator ROTEL cu S...
 Cum functioneaza un ISP pe fibra

max 550 Eur/luna, 60 luni, garant...

Sfaturi sistem fotovoltaic

Aranjare canale DIGI pe Android TV
 

"Tree Menu" cat mai simplu posibil

- - - - -
  • Please log in to reply
2 replies to this topic

#1
radu-tanasescu

radu-tanasescu

    Junior Member

  • Grup: Members
  • Posts: 152
  • Înscris: 03.05.2008
Salutare,

Am si eu o mica problema, trebuie sa fac un tree menu in care linkurile din meniu sa fie imagini, nu am nevoie de animatii, nu am nevoie de iconite de windows, doar un simplu efect de hover, mai jos aveti si o imagine ca exemplu.

Pe google gasesc o tona de ajax menu, windows xp style menu si alte chestii de genul asta care sunt mult prea complicate pentru ce am nevoie...

[ http://img115.imageshack.us/img115/3042/menuexampleqq0.jpg - Pentru incarcare in pagina (embed) Click aici ]

#2
lord_ice

lord_ice

    SEO is ART

  • Grup: Banned
  • Posts: 4,100
  • Înscris: 20.06.2007
http://www.google.ro...lient=firefox-a

#3
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View Postradu-tanasescu, on Jun 26 2008, 19:25, said:

Salutare,

Am si eu o mica problema,
Vrei la hover sau la click? Tree menu e de obicei la click. Mai jos ai doua exemple, cite unul pentru fiecare caz. Atentie: nu e cu poze, pozele ti le bagi tu unde trebuie. Sper ca stii unde trebuie sa le bagi.


1. daca vrei la hover, html e cam asa:

<ul id="nav">

<li><a href="">Click me</a></li>

<li><a href="">Click me not</a></li>

<li><a href="">Click me acum!</a>

<ul>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

</ul>

</li>

<li><a href="">Click me</a></li>

<li><a href="">Click me not</a></li>

</ul>






iar css e cam asa (foarte frugal, ca sa fie rapid):



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
* {margin:0;padding:0;list-style:none}
ul#nav {float:left;width:200px;padding:0;margin:0}
ul#nav li {float:left;width:200px;padding:0;margin:1px 0}
ul#nav li a {float:left;width:180px;padding:5px 10px;background:#ccc}
ul#nav li li a {background:#eee}
ul#nav ul {display:none}
ul#nav li:hover ul {display:block}
</style>
<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>
</head>
<body>

<ul id="nav">

<li><a href="">Hover me</a></li>

<li><a href="">Hover me not</a></li>

<li><a href="">Hover me NOW</a>

<ul>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

<li><a href="">Undermenu</a></li>

</ul>

</li>

<li><a href="">Hover me not</a></li>

<li><a href="">Click me if you like!</a></li>

</ul>

</body></html>





daca vrei la click, e oleaca mai complicat, dar nu foarte.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Accessible javascript dropdown</title>

<script type="text/javascript">

function changeClass() {
document.getElementById('list').className = 'hide';
}
window.onload = changeClass;

// open info block

document.getElementsByClassName = function?{   
    var el = [], found = [];   
    if(document.getElementsByTagName) {    
 	   el = document.getElementsByTagName('*');    
 	   for(var i = 0; i < el.length; i++) {	    
 		   if(el[i].className === c) { found.push(el[i]); }
 	   }
    }    
    return found;
};

function toggle_info(elementid){
 		var divs = document.getElementsByClassName('info','info_last');
 		for(var i = 0; i< divs.length; i++){ 
 				  if(divs[i] == document.getElementById(elementid)) {
 						   if(divs[i].style.display=="block"){
 									 divs[i].style.display = "none";
 						   }else{
 									 divs[i].style.display = "block";
 						   }
 				  }else {
 						   divs[i].style.display = "none";
 				  }
 		}
}


//close info block - needed only if close button is present
function toggle_close( targetId ){
 target = document.getElementById( targetId );
 if (target.style.display == "block") {
 	target.style.display = "none";
 }else{
 	target.style.display = "none";
 }
}




</script>
<style type="text/css">

body {font:normal 68.81%/1.8 helvetica, sans-serif;color:#666;background:#fff}
body, div, ul, ol, li, dl, dt, dd, p, blockquote, h1, h2, h3, h4, h5, h6 {margin:0;padding:0;list-style:none}
#wrap {font-size:1em;width:960px;margin:0 auto}
h1,h2,h3,h4,h5 {font-size:1.2em;font-family:georgia, times, serif;letter-spacing:-.05em;}
a {color:#c30;text-decoration:none}
a:hover {text-decoration:underline}
a:link,a:visited,a:hover,a:active {outline:0}

ul#list {width:200px;border:1px solid #ddd;border-bottom:none}
ul#list li {border-bottom:1px solid #ddd;padding:5px;}
.info p a {text-align:right;display:block}
.hide .info{display:none}




</style>
</head>

<body>
<div id="wrap">
<ul id="list" class="show">

 <li>

 	<h2><a onclick="toggle_info('div1');return false;" href="#div1">Click me!</a></h2>
 	<div id="div1" class="info">
 	 
 		<p>When javascript is deactivated the hidden content is always shown.
 		<a href="#" onclick="toggle_close('div1');return false;">Close</a>
 		</p>
 	</div>
 </li>

 <li>

 	<h2><a onclick="toggle_info('div2');return false;" href="#div2">Click me!</a></h2>
 	<div id="div2" class="info">
 	 
 		<p>The dropdown is fully functional and accessible. It was tested in IE6, IE7, Firefox 2 Win, Opera 9 Win, Safari 3 Win. I didn't test it on a Mac and under Linux, but I presume there are no problems. I hope!
 		<a href="#" onclick="toggle_close('div2');return false;">Close</a>
 		</p>
  
 	</div>
 </li>

 <li>

 	<h2><a onclick="toggle_info('div3');return false;" href="#div3">Click me!</a></h2>
 	<div id="div3" class="info">
 	 
 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
 		<a href="#" onclick="toggle_close('div3');return false;">Close</a>
 		</p>		 
 	</div>
 </li>

</ul>
</div>

</body>
</html>







Edited by Jumping Jack, 26 June 2008 - 19:57.


Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate