28172 sujets

CSS et mise en forme, CSS3

Recherche solution pour menu qui apparait sur demande

bonjour à tous,
je débute dans le html et le css. j'ai été sur plusieurs sites mais aucun ne me propose la solution exacte que je recherche.
Je souhaiterais créer un menu qui apparaitrait du coin gauche de l'image en slide mais uniquement quand on cliquerait sur l'onglet menu, puis qui disparaitrait en recliquant sur ce même boutton...
je sais ce n'est pas très claire. Allez voir la présentation des pages annexes du site officiel du moulin rouge. C'EST CA QUE JE CHERCHE DESEPEREMMENT!!!!!
Merci d'avance
Modérateur
Bonjour

Ce qu'il te faut c'est d'utiliser du javascript.

Tu peux une librairie qui te simplifiera la vie: jQuery, mootools, scriptaculous, etc.
Salut,
Sur le site du moulin rouge c'est du flash du coup c'est différent.
Tu peux très bien le faire en full CSS en jouant sur les marges et avec un peu de css4 pour les animations.

A+
WebD a écrit :
...un peu de css4 pour les animations.
Tout va trop vite dans ce monde de brutes, je n'ai pas le temps de suivre ! Smiley eek Smiley lol Smiley cligne
Modérateur
Oui voilà,

donc deux solutions:

- Une solution css3 si tu désires apprendre
- Une solution javascript si c'est pour un résultat devant se retrouver en prod, et que tu souhaites que l'on puisse accéder à ton menu ^^
oullaaaaa!!! complicato l'affaire! lol
je vais tenter le coup avec jQuery. Je l'ai télécharger maintenant reste plus qu'à apprendre à s'en servir...
merci la compagnie
J'ai trouvé une solution: on créé un menu déroulant en plaçant les éléments suivant la forme que l'on veut obtenir et on applique un marquee sur les liens cachés. Le seul "ik" c'est que dans explorer il ne m'affiche le menu qu'une seule fois et que pour l'instant je sais pas comment le faire rester en place quand la souris n'est plus hover.... Une IDée????
Je vous met le code mais regardez pas le bazar...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
background-color: #000;
background-repeat: no-repeat;
background-position: centre top;
background-attachment: scroll;
}


div#blockmenu{ width:240px; float:left; color:#FFFFFF;position:relative; top:200px; font-family:bellerose; }




ul li{list-style-type:none; }






ul.niveau2 a{ line-height:15px; margin:20px 0; padding:10px 5px 10px 40px; display:block; padding:10px; margin-top:10px; font-size:18px; text-decoration:none; font-family:bellerose; color:#FFFFFF; text-align: center ;background:#FFF; background-color: rgba(183,232,255,0.1); }

ul.niveau2 li a:visited{ background-position:center right; background-repeat:no-repeat; line-height:15px; margin:20px 0; padding:10px 5px 10px 40px; display:block; padding:10px; margin-top:10px; font-size:18px; text-decoration:none; font-family:bellerose; color:#FFFFFF; text-align: center ;background:#FFF; background-color: rgba(183,232,255,0.1); }


ul.niveau2 li a:onclic{ color:#FFFFFF; font-size:20px; text-align:center;background:#FFF; background-color: rgba(183,232,255,0.1); list-style-type:none; }


ul.niveau1{font-size:22px; background-color:transparent;}

div#icones {position:relative; top:300px;}

ul ul{display:none; position:relative; left:20px; top:80px; margin:10px; padding:0px;}
li:hover ul.niveau2{display:block;}









</style>

</head>

<body>



<div id="icones">

<img src= "at-sign.png" width="49" height="54" alt="contact" />
</div>


<div id="global">

<div id="blockmenu">

<ul class="niveau1">
<li>Menu

<ul class="niveau2" >
<marquee behavior="slide" direction="right" draggable="true" scrollamount="15" height="500" scrolldelay="0" >

<li> <a href="index.html">Accueil</a></li>
<li> <a href="diner_concert.html">Diner Concert </a></li>
<li> <a href="concert.html"> Concert</a></li>
<li> <a href="cabaret.html">Cabaret </a></li>
<li> <a href="shows.html"> Shows</a></li>
<li> <a href="music_hall">Music Hall</a></li>
</marquee>

</ul>
</li>
</ul>
</div>
</div>


</body>
</html>
Sujet clos
Aller à