Html & js help !!

reotrebor · 20/11/08

Salve ragazzi ! Ho bisogno di una mano mega !
Sto lavorando ad un sito internet (HTML) e vorrei (usando un javascript o come preferite) creare una specie di 'slide','tapparella','tendina' o come preferite voi (giusto per capirci) che la posso richiamare con un click sopra un bottone specifico , e al cui interno (della nostra tapparella) ci siano delle opzioni di visualizzazione scelte da me...
Il problema è che non so come fare per creare e gestire questa 'tapparella' ! Se potete aiutarmi ve ne sarei grato ! Spero di essere stato leggermente esauriente :) in caso non esitate a chiedere altre spiegazioni...
grazie mille , confido in Voi
reotrebor

rovermtb · 20/11/08

ho ben capito cosa intendi.... a suo tempo avevo fatto qualcosa con il comando html DIV per mostrare pannelli e penso che con un js potresti modificarne la dimensione per farli "scorrere": prova a guardare su www.html.it, hanno parecchi js già creati e pronti all'uso!

reotrebor · 20/11/08

rovermtb ha scritto:
ho ben capito cosa intendi.... a suo tempo avevo fatto qualcosa con il comando html DIV per mostrare pannelli e penso che con un js potresti modificarne la dimensione per farli "scorrere": prova a guardare su www.html.it, hanno parecchi js già creati e pronti all'uso!

Eh magari , di js non ne hanno (o forse non ne ho trovati io) ...
Altrimenti sai dove indirizzarmi ? Grazie mille...

reotrebor · 20/11/08

Comunque non ho trovato niente nemmeno nelle altre sezioni :(

moka · 20/11/08

Prova qui, http://www.web-link.it/ e vai sulla sezione scripting.
Mi ricordo che c'era qualcosa del genere, se non è li, prova a cercare... dev'esserci dento questo sito.
Ciao.

moka · 20/11/08

P.s. Prova anche qui.
http://angeloblua.altervista.org/web/menu/op_clo/menu_cascata_simplex.html

The_Evil · 20/11/08

Qui c'è un how to di html.it per la creazione di menù a tendina in js.

http://javascript.html.it/articoli/leggi/15/menu-a-tendina-con-javascript/1/

Forse può esserti utile! ;-)

Ciao

crc_error · 20/11/08

Ciao, dovrei avere in giro qualcosa di già fatto, domani se vuoi posso postarti il codice.
Ma le categorie principali come sono organizzate?

Una sopra l'altra stile così oppure hai le categorie principali in orizzontale e il menu a tendina che scende in verticale?

crc_error · 21/11/08

Ciao, questa è la bozza di un progetto che avevo in giro. E' un pò grezza e andrebbe definita, come per es. aggiungere lo scorrimento più rallentato.

Su safari e FF funziona, è da testare su IE (anche se non credo ci siano grossi problemi.

purtroppo non ho uno spazio dove hostare il codice per farti vedere il risultato.

Ciao! o-o

Index.php

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Home Page</title>
  <meta name="GENERATOR" content="Textedit">
  <meta name="AUTHOR" content="[email protected]">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta name="KEYWORDS" content="ricerca">
  <script type="text/javascript" src="comuniAjax/genericJs.js"></script>	
  <style type="text/css" media="all">
  <!--
	@import url("css/navigationLeft.css") screen;
  -->	
  </style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
	@import "css/mainIndex.css";
	@import "css/contenutoIndex.css";
	@import "css/navigationLeft.css";
</style>
<![endif]-->
</head>
<body>
<div id="box">
	<div id="contenuto">
	<div id="navigationLeft">
		<?php require_once 'moduli/navigationLeft.php'; ?>
	</div>
	</div>
</div>

</body>
</html>

moduli/navigationLeft.php

HTML:

	<div class="titleNavigation">Titolo</div>	
	<div id="temiTrattati">
		<div>&nbsp;</div>
		<div class="catPrincipale" id="divCatPrinc0"
			onMouseOver="javascript:evidenziaRiga(this.id);" 
			onMouseOut="javascript:disEvidenziaRiga(this.id);"
			onClick="javascript:showHideDiv(this.id, 'ul0', '0');">Estate
		</div>
		<div class="catPrincipale" id="divCatNasc0">
			<ul class="ulNavi" style="display: none;" id="ul0">
				<li><a href="#" class="linkNaviLeft">Caldo</a></li>
				<li><a href="#" class="linkNaviLeft">Afa</a></li>
			</ul>
		</div>

		<div class="catPrincipale" id="divCatPrinc1"
			onMouseOver="javascript:evidenziaRiga(this.id);" 
			onMouseOut="javascript:disEvidenziaRiga(this.id);"
			onClick="javascript:showHideDiv(this.id, 'ul1', '1');">Inverno
		</div>
		<div class="catPrincipale" id="divCatNasc1">
			<ul class="ulNavi" style="display: none;" id="ul1">
				<li><a href="#" class="linkNaviLeft">Freddo</a></li>
				<li><a href="#" class="linkNaviLeft">Neve</a></li>
				<li><a href="#" class="linkNaviLeft">Ghiaccio</a></li>
				<li><a href="#" class="linkNaviLeft">Caloriferi</a></li>
				<li><a href="#" class="linkNaviLeft">Giacca</a></li>
				<li><a href="#" class="linkNaviLeft">Sciarpa</a></li>
			</ul>
		</div>


		<div class="catPrincipale" id="divCatPrinc2"
			onMouseOver="javascript:evidenziaRiga(this.id);" 
			onMouseOut="javascript:disEvidenziaRiga(this.id);"
			onClick="javascript:showHideDiv(this.id, 'ul2', '2');">Cibo
		</div>
		<div class="catPrincipale" id="divCatNasc2">
			<ul class="ulNavi" style="display: none;" id="ul2">
				<li><a href="#" class="linkNaviLeft">Agriturismi</a></li>
				<li><a href="#" class="linkNaviLeft">Ristoranti tipici</a></li>
			</ul>
		</div>


		<div class="catPrincipale" id="divCatPrinc3"
			onMouseOver="javascript:evidenziaRiga(this.id);" 
			onMouseOut="javascript:disEvidenziaRiga(this.id);"
			onClick="javascript:showHideDiv(this.id, 'ul3', '3');">Cultura
		</div>
		<div class="catPrincipale" id="divCatNasc3">
			<ul class="ulNavi" style="display: none;" id="ul3">
				<li><a href="#" class="linkNaviLeft">Musei</a></li>
				<li><a href="#" class="linkNaviLeft">Chiese</a></li>
				<li><a href="#" class="linkNaviLeft">Monumenti</a></li>
				<li><a href="#" class="linkNaviLeft">Gallerie</a></li>
			</ul>
		</div>


		<div class="catPrincipale" id="divCatPrinc4"
			onMouseOver="javascript:evidenziaRiga(this.id);" 
			onMouseOut="javascript:disEvidenziaRiga(this.id);"
			onClick="javascript:showHideDiv(this.id, 'ul4', '4');">Attrazioni
		</div>
		<div class="catPrincipale" id="divCatNasc4">
			<ul class="ulNavi" style="display: none;" id="ul4">
				<li><a href="#" class="linkNaviLeft">Parchi a tema</a></li>
				<li><a href="#" class="linkNaviLeft">Parchi divertimento</a></li>
			</ul>
		</div>


		</div>
		<div>&nbsp;</div>
	</div> 
	<div>&nbsp;</div>

css/navigationLeft.css

HTML:

div#navigationLeft {
	position: absolute;
	top: 125px;
	left: 0;
	width:170px;
	padding: 5px;
/*	padding: 1em 0 0 10px; */
}


div#temiTrattati, div#ultimeMete, div#diariDiViaggio, div#tripWeek, div#linkEsterni, div#fiere {
	background-color: #d5eaff; 
	left: 1px; 
	border: 1px solid #ccc;
}


.titleNavigation {
	font-variant: normal;
	line-height: 1.6em;
	font-size: 9pt;
	margin-bottom: 5px;	
	border: 1px solid #006699;	
	padding-top: 1px;	
	padding-left: 5px;
	font-weight: 600;
	height: 20px;
	background-color: #acd2ff;
	color: #000;
}



.linkNaviLeft, .linkNaviLeft:link, .linkNaviLeft:visited {
    color: #000066;
    padding: 1px;
    text-decoration: none;
    line-height: 1.6em;
    font-weight: bolder;
    font-variant: normal;
    margin-left: 2px;
    font-size: 8pt;
}

.linkNaviLeft:hover, .linkNaviLeft:active {
    color: #ff6600;
    text-decoration: none;
    font-size: 8pt;
    margin-left: 2px;
    font-weight: bolder;
    font-variant: normal;
    line-height: 1.6em;
    padding: 1px;
}

.linkNaviLeftMid, .linkNaviLeftMid:link, .linkNaviLeftMid:visited {
    color: #000066;
    padding: 1px;
    text-decoration: none;
    line-height: 1.6em;
    font-weight: bolder;
    font-variant: normal;
    margin-left: 2px;
    font-size: 7pt;
}

.linkNaviLeftMid:hover, .linkNaviLeftMid:active {
    color: #ff6600;
    text-decoration: none;
    font-size: 7pt;
    margin-left: 2px;
    font-weight: bolder;
    font-variant: normal;
    line-height: 1.6em;
    padding: 1px;
}

.ulNavi {
    list-style: square inside;
    margin: 0;
    padding: 8px;
  }


/* evidenzia il testo di aracio al passaggio del mouse */
.catPrincipale {
    color: #000066;
    text-decoration: none;
    line-height: 1.6em;
    font-weight: bolder;
    font-variant: normal;
    font-size: 9pt;
    padding-top: 2px;	
    padding-left: 6px;
}

.catPrincipaleEvidenziato {
    color: #ff6600;
    text-decoration: none;
    line-height: 1.6em;
    font-weight: bolder;
    font-variant: normal;
    font-size: 9pt;
    padding-top: 2px;	
    padding-left: 6px;
}
/* -- -- -- --  */

/* evidenzia l'intestazione del paragrafo sul click del mouse */
.catPrEvidIntestazione {
  
	border-bottom: 1px solid #cdcdcd;
	border-top: 1px solid #cdcdcd;	
    background-color: #eaeaea;
    color: #000066;
    text-decoration: none;
    line-height: 1.6em;
    font-weight: bolder;
    font-variant: normal;
    font-size: 9pt;
    padding-top: 2px;	
    padding-left: 6px;
}

Cerca

Cerca

Html & js help !!

reotrebor

Biker serius

rovermtb

Moderatur Beatus

reotrebor

Biker serius

reotrebor

Biker serius

moka

Biker ultra

moka

Biker ultra

The_Evil

Biker marathonensis

crc_error

Biker poeticus

crc_error

Biker poeticus

Yeti SB5 Turq in ottime condizioni

MOZZO POSTERIORE INDUSTRY NINE HYDRA 12X148

Classifica giornaliera dislivello positivo