Sign In
Create Account
Back to top
 |
Second Opinion
Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale. Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit. www.neurohope.ro |
"Tree Menu" cat mai simplu posibil
Last Updated: Jun 26 2008 19:55, Started by
radu-tanasescu
, Jun 26 2008 19:25
·
0
0
#1
Posted 26 June 2008 - 19:25
|
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 ] |
#3
Posted 26 June 2008 - 19:55
|
Salutare, Am si eu o mica problema, 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
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.