28172 sujets

CSS et mise en forme, CSS3

Menu accordéon

<div id="brand" class="menuSection">
<h2><a href="#brand">Guides des métiers</a></h2>
<FORM action="" method="post">
<strong>Test des Etudiants</strong><br/>

<LABEL for="specialiter">Specialité: </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><br/>
<LABEL for="ecole">Ecole : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><br/>
<LABEL for="niveau">Niveau : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><br/>
<center> <p> <INPUT type="submit" value="Envoyer"> </p><center>

</FORM>

</div>
<div id="promotion" class="menuSection">
<h2><a href="#promotion">Guides scolaire</a></h2>


<FORM action="" method="post">
<strong>Test des Etudiants</strong><br/>

<LABEL for="specialiter">Specialité: </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<LABEL for="ecole">Ecole : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<LABEL for="niveau">Niveau : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<center><p> <INPUT type="submit" value="Envoyer"> </p> </center>

</FORM>

</div>
<div id="event" class="menuSection">
<h2><a href="#event">Test d'orientation gratuit</a></h2>


<FORM action="" method="post">
<strong>Test des Etudiants</strong><br/>

<LABEL for="specialiter">Specialité: </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><br/>
<LABEL for="ecole">Ecole : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><br/>
<LABEL for="niveau">Niveau : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr>
<center><p><INPUT type="submit" value="Envoyer"></p></center>

</FORM>

</div>
<div id="club" class="menuSection">
<h2><a href="#club">Club étudiants</a></h2>
<FORM action="" method="post">
<strong>Test des Etudiants</strong><br/>

<LABEL for="specialiter">Specialité: </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<LABEL for="ecole">Ecole : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<LABEL for="niveau">Niveau : </LABEL>
<td><select name="matiere" size="1">
<option></option>
<option>Algorithme</option>
<option>Réseaux</option>
<option>Html</option>
<option>Système d'exploitation</option>
<option>Architécture des ordinateurs</option>
<option>Français</option>
<option>Anglais</option>
<option>Mathématique</option>
<option>Linux Unix</option>
<option>Mérise</option>
<option>Administration windows</option>
<option>Base de données</option>
<option>Web dynamique (PHP)</option>
<option>Projet Web</option>
<option>Cours Oracle</option>
<option>Java avancé</option>
<option>UML</option>
<option>XML</option>
<option>Multimedia</option>
<option>Jsp</option>
</select></td></tr><BR>
<center><p> <INPUT type="submit" value="Envoyer"> </p></center>

</FORM>

</div></div></div>

le code css:

.accordionMenu {
font: 12px Arial, Verdana, sans-serif;
color:#424242;
background: #fff;
padding: 0px;
width: 300px;
margin-top:680px;
border:2px solid #000000;
}
.accordionMenu h1 {
margin: 0;
font-size: 20px;
text-shadow: 2px 2px 2px #aeaeae;
}
.accordionMenu h2 {
margin:1px 0;
padding:0;
}
.accordionMenu h2 a {
font-size: 13px;
display: block;
font-weight: normal;
color:#424242;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration:none;
margin:0;
padding:10px 10px;
background:#ccc;
background: -moz-linear-gradient( top, #cecece, #ccc); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#ccc)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ccc); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)"; /* IE 8 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #ccc;
background: -moz-linear-gradient( top, #ccc, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from( #ccc), to(#ccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
color:#FFF;
}
.accordionMenu form{
padding:0 5px;
margin:0;
height: 0;
overflow: hidden;
-moz-transition: height 0.5s ease-in;
-webkit-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
.accordionMenu :target form {
overflow: auto;
height:150px;
border-bottom:1px double #000000;
}
Sujet clos
Aller à