|
|||||||
|
|
|
 |
|
|
Strumenti |
09-08-2007, 20:41
|
#1 |
|
Senior Member
Iscritto dal: Oct 2005
Città: Pompei(NA)
Messaggi: 3087
|
Menu a tendina in JavaScript!?!
Volevo sapere se realizzare un menu tendina tipo quello di aruba.it oppure anche quella di HW (quella dove clicchi su Cerca o Link compare il menu) sia impossibile(ho visto lo script sul sito di aruba O___O ) http://www.aruba.it/menu_sx/stmenu.js
e dove potevo trovare del materiale sulla rete per realizzarla! Grazie mille 
__________________
My Deviant-Gallery MacBook Pro 13'' Retina i5 dual-core a 2,6GHz - 8GB Ram - 256GB SSD :: iPhone 12 128GB :: iPad 7 128GB WiFi :: Apple Watch 4 (40mm) |
|
|
|
09-08-2007, 22:34
|
#2 |
|
Senior Member
Iscritto dal: Apr 2006
Città: Bergamo
Messaggi: 440
|
prova a dare un'occhiata qui, nella sezione "script" è molto probalbile che si riesca a trovare qualche script già pronto che faccia al caso tuo!
__________________
Guitar Pub, il sito dedicato al mondo della chitarra e dei chitarristi... e il mio Spazio ------------------------------------ Ho trattato positivamente con: teosc |
|
|
|
|
09-08-2007, 22:41
|
#3 |
|
Member
Iscritto dal: Apr 2007
Messaggi: 263
|
É un p'o complicato da spiegare se non sei pratico di javascript. Nell nuovo IExplorer e firefox lo puoi fare anche solo con css, altrimenti devi usare javascript!
Questo é il codice di una pagina che ho fatto(Scusa per il testo in tedesco Codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#Rahmen {
width: 540px;
padding: 1px;
padding-left:0px;
border: 0px none black;
background-color: transparent;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
margin-left:2px;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 60px; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid white;
color: white; background-color: black;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 5.95em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
body {
background-image: url(logo.JPG);
background-repeat: repeat;
}
</style>
<script type="text/javascript">
var defaultFoto = "none";
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block";UL.style.backgroundImage = "url(bg.gif)";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
document.getElementById("FotoPrew").style.backgroundImage = defaultFoto;
}
window.onload=hoverIE;
}
function changeFoto(Foto)
{
document.getElementById("FotoPrew").style.backgroundImage = 'url(icons/' + Foto + '.gif)';
}
function setDefault(Foto)
{
//defaultFoto = 'url(icons/' + Foto + '.png)';
}
</script>
<body topmargin="0px" rightmargin="0px" leftmargin="0px" bgcolor="black" style=";color:White;font-family:Verdana,Arial;font-size:10px">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="816px" height="600px">
<tr>
<td rowspan="4" style="background-image:url(border.gif);width:8px"> </td>
<td colspan="2" style="background-image:url(bordert.gif);height:8px"></td>
<td rowspan="4" style="background-image:url(borderr.gif);height:8px"> </td>
</tr>
<tr>
<td height="68px" width="252" style="background-image:url(g/a1.gif)"> </td>
<td height="68px" width="548" style="background-image:url(g/b1.jpg);">
<div id="FotoPrew" style="margin-left:480px;height:50px;width:50px;background-image:none"></div> </td>
</tr>
<tr>
<td height="36px" width="252" style="background-image:url(g/a2.gif)"> </td>
<td height="36px" width="548" style="background-image:url(g/b2.gif)" valign="top">
<div id="Rahmen"><ul id="Navigation">
<li><a href="i/home/home.htm" target="frame" onmouseover="javascript:changeFoto('team')">Home</a></li>
<li><a href="#" onmouseover="javascript:changeFoto('team')">Club</a>
<ul>
<li><a href="i/team/club-story-i.htm" target="frame" onmouseover="javascript:changeFoto('team')">Story</a></li>
<li><a href="i/team/club-i.htm" target="frame" onmouseover="javascript:changeFoto('team')" >Foto</a></li>
<li><a href="i/team/sponsors-i.htm" target="frame" onmouseover="javascript:changeFoto('team')" >Sponsors</a></li>
</ul></li>
<li><a href="#" onmouseover="javascript:changeFoto('team')">Riders</a>
<ul>
<li><a href="i/team/bobo-i.htm" target="frame" onmouseover="javascript:changeFoto('bobo')" onclick="javascript:setDefault('bobo')">Bobo</a></li>
<li><a href="i/team/dagai-i.htm" target="frame" onmouseover="javascript:changeFoto('dagai')" onclick="javascript:setDefault('dagai')">Dagai</a></li>
<li><a href="i/team/damian-i.htm" target="frame" onmouseover="javascript:changeFoto('damian')" onclick="javascript:setDefault('damian')">Damian</a></li>
<li><a href="i/team/dani-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Dani</a></li>
<li><a href="i/team/dursa-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Dursa</a></li>
<li><a href="i/team/gio-i.htm" target="frame" onmouseover="javascript:changeFoto('gio')" onclick="javascript:setDefault('gio')">Gio</a></li>
<li><a href="i/team/guz-i.htm" target="frame" onmouseover="javascript:changeFoto('guz')" onclick="javascript:setDefault('guz')">Guz</a></li>
<li><a href="i/team/jo-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Jo</a></li>
<li><a href="i/team/julian-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Juli</a></li>
<li><a href="i/team/lux-i.htm" target="frame" onmouseover="javascript:changeFoto('lux')" onclick="javascript:setDefault('lux')">Lux</a></li>
<li><a href="i/team/mirko-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Mirko</a></li>
<li><a href="i/team/philipp-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Philipp</a></li>
<li><a href="i/team/robbi-i.htm" target="frame" onmouseover="javascript:changeFoto('nopic')">Robbi</a></li>
<li><a href="i/team/schmid-i.htm" target="frame" onmouseover="javascript:changeFoto('schmid')" onclick="javascript:setDefault('schmid')">Schmid</a></li>
<li><a href="i/team/stefan-i.html" target="frame" onmouseover="javascript:changeFoto('nopic')">Stefan</a></li>
</ul>
</li>
<li><a href="#" onmouseover="javascript:changeFoto('gallery')">Gallery</a>
<ul>
<li><a href="gallery/06-07.htm" target="frame" onmouseover="javascript:changeFoto('gallery')">Video 2006/07</a></li>
<li><a href="fotoalbum/fotoalbum 06-07neu/bilder/index.htm" target="frame" onmouseover="javascript:changeFoto('gallery')">Foto 2006/07</a></li>
</ul>
</li>
<li><a href="i/links/links.htm" target="frame" >Contact us</a></li>
<li><a href="public/webmaster/guestbook/buch.html" target="frame">Guestbook</a>
</ul>
</li>
</ul>
</div> </td>
|
|
|
|
|
10-08-2007, 10:55
|
#4 | |
|
Senior Member
Iscritto dal: Oct 2005
Città: Pompei(NA)
Messaggi: 3087
|
Quote:
Pero non riesco a capire quale sia la funzione che fa comparire la tendina..  vedo che sui pulsanti richiami la funzione changeFoto che, credo, servi per cambiare la foto sulla pagina (e che io non posso vedere in locale )grazie ancora per la disponibilità! ciao
__________________
My Deviant-Gallery MacBook Pro 13'' Retina i5 dual-core a 2,6GHz - 8GB Ram - 256GB SSD :: iPhone 12 128GB :: iPad 7 128GB WiFi :: Apple Watch 4 (40mm) |
|
|
|
|
|
10-08-2007, 12:00
|
#5 |
|
Member
Iscritto dal: Apr 2007
Messaggi: 263
|
Sono contento che ti sia servito
Comunque la funzione che fa comparire il menu é: Codice:
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block";UL.style.backgroundImage = "url(bg.gif)";
}
Codice:
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
document.getElementById("FotoPrew").style.backgroundImage = defaultFoto;
}
|
|
|
|
|
10-08-2007, 12:31
|
#6 |
|
Senior Member
Iscritto dal: Oct 2005
Città: Pompei(NA)
Messaggi: 3087
|
grazie mille
cmq sto facendo delle prove: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Prova</title> <script type="text/javascript"> function func(){ //document.getElementById("t1").style.background="#aa88aa"; document.getElementById("t1").innerHTML="<table><tr><td>Gennaio"+ "</td></tr></table>"; } function func2(){ document.getElementById("t1").innerHTML=""; } </script> </head> <body> <table align="left" cellpadding="0px" cellspacing="0px" style="width: 401px"> <tr> <td style="width: 50px"> <table> <tr> <td bgcolor="aqua" onmouseover="func()" onmouseout="func2()"> 2007 </td> </tr> </table> </td> <td id="t1" > </td> </tr> </table> </body> </html> Sembra funzionare!
__________________
My Deviant-Gallery MacBook Pro 13'' Retina i5 dual-core a 2,6GHz - 8GB Ram - 256GB SSD :: iPhone 12 128GB :: iPad 7 128GB WiFi :: Apple Watch 4 (40mm) |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 23:26.
