Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
The Tattooist of Auschwitz (2024)

Se poate recupera numar de telefo...

Upgrade de la MacBook Pro M1 cu 8...

Ce tip de monitor am nevoie pt of...
 Resoftare camera supraveghere

Cu ce va aparati de cainii agresi...

Nu imi platiti coletul cu cardul ...

Exista vreun plan de terorizare p...
 Schimbare adresa DNS IPv4 pe rout...

Recomandare Barebone

Monede JO 2024

Suprasolicitare sistem electric
 CIV auto import

Mutare in MOZAMBIC - pareri, expe...

Scoatere antifurt airtag de pe ha...

Magnet in loc de clește pent...
 

"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

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

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