CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:50:56

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> MENU VERTICALE GAUCHE ET DROIT DEROULANT

MENU VERTICALE GAUCHE ET DROIT DEROULANT

Information sur la source

Note :
Aucune note

Catégorie :Menu & Co Classé sous :menu glissant, menu deroulant, menu verticale, verticale Niveau :Débutant Date de création :22/10/2009 Date de mise à jour :23/10/2009 12:15:15 Vu / téléchargé :12 865 / 1 378

Auteur : kazma

Ecrire un message privé

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

c'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrandi et rapetisse sa permet entre autre de mettre un menu a droite de l'ecran

Source

<html>
<head>
<title>menu gauche</title>
<link rel="stylesheet" href="menu/menu_style2.css" type="text/css" />
<SCRIPT>
var mndv=0
var mngv=0
function mng(){
var Table_Gauche=document.getElementById('dg1')
var wrg = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_Gauche.currentStyle.width) : parseInt(getComputedStyle(Table_Gauche, null).getPropertyValue('width')));
if(mngv==1){
Table_Gauche.style.width = wrg-10+'px'
if(wrg<=39){
mngv=0
document.getElementById('gm2').src='aller.gif'
return false
}
setTimeout("mng()",16)
}
if(mngv==0){
Table_Gauche.style.width= wrg+10+'px'
if(wrg>=200){
mngv=1
document.getElementById('gm2').src='retour.gif'
return false
}
setTimeout("mng()",16)
}}
function mnd(){
var Table_droite=document.getElementById('dg2')
var wrt = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_droite.currentStyle.width) : parseInt(getComputedStyle(Table_droite, null).getPropertyValue('width')));
if(mndv==1){
Table_droite.style.width=wrt-10+'px'
if(wrt<=44){
mndv=0
document.getElementById('gm1').setAttribute('src','retour.gif')
return false
}
setTimeout("mnd()",16)
}
if(mndv==0){
Table_droite.style.width=wrt+10+'px'
if(wrt>=200){
mndv=1
document.getElementById('gm1').setAttribute('src','aller.gif')
return false
}
setTimeout("mnd()",16)
}
}
</SCRIPT>
</head>
<body bgcolor='black'>
<div id="dg1">
<div id="divmenu1">
<ul id="menu">
<li><a href="" target="_self">premier</a></li>
<li><a href="" target="_self">deuxieme</a></li>
<li><a href="" target="_self">troisieme</a></li>
<li><a href="" target="_self">quatrieme</a></li>
<li><a href="" target="_self">cinquieme</a></li>
<li><a href="" target="_self">sixieme</a></li>
<li><a href="" target="_self">septieme</a></li>
<li><a href="" target="_self">huitieme</a></li>
<li><a href="" target="_self">neuf</a></li>
<li><a href="" target="_self">dix</a></li>
<li><a href="" target="_self">premier</a></li>
<li><a href="" target="_self">deuxieme</a></li>
<li><a href="" target="_self">troisieme</a></li>
<li><a href="" target="_self">quatrieme</a></li>
<li><a href="" target="_self">cinquieme</a></li>
<li><a href="" target="_self">sixieme</a></li>
<li><a href="" target="_self">septieme</a></li>
<li><a href="" target="_self">huitieme</a></li>
<li><a href="" target="_self">neuf</a></li>
<li><a href="" target="_self">dix</a></li>
</ul>
</div>
<div id='fleche1'onmouseover='mng()'><img id='gm2'src='aller.gif' style='margin-left:2px'>
</div>
</div>
<div id="dg2">
<div id="divmenu2">
<ul id="menu">
<li><a href="" target="_self">premier</a></li>
<li><a href="" target="_self">deuxieme</a></li>
<li><a href="" target="_self">troisieme</a></li>
<li><a href="" target="_self">quatrieme</a></li>
<li><a href="" target="_self">cinquieme</a></li>
<li><a href="" target="_self">sixieme</a></li>
<li><a href="" target="_self">septieme</a></li>
<li><a href="" target="_self">huitieme</a></li>
<li><a href="" target="_self">neuf</a></li>
<li><a href="" target="_self">dix</a></li>
<li><a href="" target="_self">premier</a></li>
<li><a href="" target="_self">deuxieme</a></li>
<li><a href="" target="_self">troisieme</a></li>
<li><a href="" target="_self">quatrieme</a></li>
<li><a href="" target="_self">cinquieme</a></li>
<li><a href="" target="_self">sixieme</a></li>
<li><a href="" target="_self">septieme</a></li>
<li><a href="" target="_self">huitieme</a></li>
<li><a href="" target="_self">neuf</a></li>
<li><a href="" target="_self">dix</a></li>
</ul>
</div>
<div id='fleche2'onmouseover='mnd()'><img id='gm1'src='retour.gif'>
</div>
</div>

<html>
<head>
<title>menu gauche</title>

<link rel="stylesheet" href="menu/menu_style2.css" type="text/css" />

<SCRIPT>
var mndv=0
var mngv=0

function mng(){

var Table_Gauche=document.getElementById('dg1')

var wrg = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_Gauche.currentStyle.width) : parseInt(getComputedStyle(Table_Gauche, null).getPropertyValue('width')));

if(mngv==1){
Table_Gauche.style.width = wrg-10+'px'
if(wrg<=39){
mngv=0
document.getElementById('gm2').src='aller.gif'
return false
}
setTimeout("mng()",16)
}

if(mngv==0){
Table_Gauche.style.width= wrg+10+'px'
if(wrg>=200){
mngv=1
document.getElementById('gm2').src='retour.gif'
return false
}
setTimeout("mng()",16)
}}


function mnd(){

var Table_droite=document.getElementById('dg2')

var wrt = ((navigator.appName.substring(0,5)=="Micro") ? parseInt(Table_droite.currentStyle.width) : parseInt(getComputedStyle(Table_droite, null).getPropertyValue('width')));

if(mndv==1){
Table_droite.style.width=wrt-10+'px'
if(wrt<=44){
mndv=0
document.getElementById('gm1').setAttribute('src','retour.gif')
return false
}
setTimeout("mnd()",16)
}
if(mndv==0){
Table_droite.style.width=wrt+10+'px'
if(wrt>=200){
mndv=1
document.getElementById('gm1').setAttribute('src','aller.gif')
return false
}
setTimeout("mnd()",16)
}
}

</SCRIPT>
</head>
<body bgcolor='black'>

<div id="dg1">	
	
	<div id="divmenu1">

		<ul id="menu">
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
	</ul>
	</div>
	<div id='fleche1'onmouseover='mng()'><img id='gm2'src='aller.gif' style='margin-left:2px'>
	</div>
	</div>
	
	
	<div id="dg2">
	
	<div id="divmenu2">
		<ul id="menu">
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
		<li><a href="" target="_self">premier</a></li>
		<li><a href="" target="_self">deuxieme</a></li>
		<li><a href="" target="_self">troisieme</a></li>
		<li><a href="" target="_self">quatrieme</a></li>
		<li><a href="" target="_self">cinquieme</a></li>
		<li><a href="" target="_self">sixieme</a></li>
		<li><a href="" target="_self">septieme</a></li>
		<li><a href="" target="_self">huitieme</a></li>
		<li><a href="" target="_self">neuf</a></li>
		<li><a href="" target="_self">dix</a></li>
	</ul>
	</div>

	<div id='fleche2'onmouseover='mnd()'><img id='gm1'src='retour.gif'>
	</div>
</div>

Conclusion

bloup bloup

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

menu
- menu
  - images
    - horizon.gif 830 octets
    - menu1.gif 2 893 octets
    - Thumbs.db4 608 octets
  - menu_style2.css 1 457 octets
- aller.gif 1 523 octets
- menu.html 3 875 octets
- retour.gif 1 525 octets
- Thumbs.db9 216 octets

Télécharger le zip

Historique

23 octobre 2009 10:34:35 :: changement du titre
23 octobre 2009 12:15:15 :: amelioration

Sources du même auteur

BOUTON ROTATIF

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS

DRAG & DROP VERS UN CANVAS

DIAPO EN CSS 3D

Toutes les sources de kazma

Sources de la même categorie

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU EN CASCADE par kazma

MENU GLISSANT par kazma

SCROLLBAR VERTICALE PERSONNALISÉE [SVP] par bultez

Commentaires et avis

Commentaire de astro53 le 24/10/2009 12:27:52

Salut Kazma,

Quelques petites remarque.
Tout dabord il manque la doc html tout en haut.
Pourquoi n as tu pas separe le js du html?. J ai telecharger ton script et je l ai ameliorer a ma facon.
En dynamisant le menu. J ai fais une boucle du type foreach de php mais plus compliquer a faire. J ai utiliser la technique presente sur cette page: http://www.toutjavascript.com/savoir/savoir09.php3.
Ca marche tout aussi bien et c'est plus dynamique.
Sinon bravo pour le srcipt je vais le mettre dans ma librairie.
A bientot
Benjamin

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

creation rotation verticale avec images et textes [ par salimz ] Bonjour,Je cherche un code me permettant de faire une rotation verticale continue avec 6 images sur la droite et du texte à gauche de chaque image.La texte verticale [ par kidpigeyre ] Bjr,j'ai un texte dans une cellule d'un tableau et je souhaite le disposer en verticale par manque de place (en gros texte tourner de -90 °). Comment Cherche aide pour menu verticale [ par rem78 ] Bonjour,Je cherche à changer le menu de mon site http://www.liftski.com par un menu qui afficherai les sous rubriques lorsque l'on clique sur le tracer une ligne verticale [ par aimie ] Bonjour !!je suis entrain de développer un éditeur de sommaire; pour cela, je voudrais tracer une ligne verticale me permettant d'aligner les titre et Créer un menu qui se déroule sur la verticale [ par skyper77 ] Bonjour,Je suis à la recherche d'une solution pour programmer un menu de ce type:C'est un menu tout simple, qui lors d'un mouseover déroule un so menu horizontale et 2 sous menu verticale seulement avec css [ par profiter ] bonjour je veux avoir un menu verticale que lorsque je passe la souris sur un des menus il m'affiche une liste verticle directement sous le menu et q

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP