Vous trouvez que votre beau moniteur LCD 38" a un rendu couleur tout pourri ? C'est normal vous avez acheté de la daube :)
Mais même de la daube doit pouvoir se régler au meilleur des ses capacités et pour ce faire rien de tel qu'une bonne petite page web faîte pour ça !
Calibration d'écran
Alors ? il tirait trop sur le bleu hein ? C'est ca ? Je le savais...
Par Noult
0
-
Recommander
Vu le temps passé à écumer le web à la recherche d'un code puvant m'aider à créer un menu "accordéon" je ne peux que partager ce que j'ai trouvé, modifié et finalement réalisé. Je pense que ça
aidera surement une ou deux personnes. A savoir : il faut obligatoirement télécharger le plugin de jquery : Collapsor
Il faut mettre ce plugin dans le même répertoire que votre page disposant dudit menu. Vous pouvez bien évidemment rajouter autant de menu que vous le désirez en suivant la même logique que pour
ceux déjà présent. J'ai essayé de mettre dans ce code tout les cas de figure.
Je vous livre donc le code HTML et le code CSS (que je vais essayer d'annoter au mieux pour que vous puissiez modifier le graphisme a votre guise) pour réaliser un menu aux lignes épurées
et donc forcément classe.
Lire la suite...
<head>
<title>Menu accordéon 3 niveaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.collapsor.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('ul a').collapsor();
$('dl strong').collapsor({sublevelElement:'dl', speed: 1000});
});
</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% Arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 0px 0;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
background: #fff;
}
dl#menu {
border-left: 3px solid #B11620 ;
}
dl#menu li {
text-align: left;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
dl#menu li a:hover, dl#menu dt a:hover, dl#menu dl a:hover {
background: #eee;
}
#mentions {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
.Style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<dl id="menu">
<dd>
<strong> Menu 1</strong>
<dl>
<dd>
<strong> Sous Menu 1.1</strong>
<dl>
<li>
<a href="#menu_1_1_1"> Sous Sous Menu
1.1.1</a>
</li>
<li>
<a href="#menu_1_1_2"> Sous Sous Menu
1.1.2</a>
</li>
<li>
<a href="#menu_1_1_3"> Sous Sous Menu
1.1.3</a>
</li>
</dl>
</dd>
<dd>
<strong> Sous Menu 1.2</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 1.2.1</a>
</li>
</dl>
</dd>
<dd>
<strong> Sous Menu 1.3</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 1.3.1</a>
</li>
</dl>
</dd>
</dl>
</dd>
<dd>
<strong> Menu 2</strong>
<dl>
<li>
<a href="#menu_2_1"> Sous Menu 2.1</a>
</li>
<li>
<a href="#menu_2_2"> Sous Menu 2.2</a>
</li>
<li>
<a href="#menu_1_1"> Sous Menu 2.3</a>
</li>
</dl>
</dd>
<dd>
<strong> Menu 3</strong>
<dl>
<dd>
<strong> Sous Menu 3.1</strong>
<dl>
<li>
<a href="#menu_1_1"> Sous Sous Menu 3.1.1</a>
</li>
<li>
<a href="#menu_1_2"> Sous Sous Menu 3.1.2</a>
</li>
</dl>
</dd>
<dd>
<li>
<a href="#menu_1_2"> Sous Menu 3.2</a>
</li>
<li>
<a href="#menu_1_2"> Sous Menu 3.3</a>
</li>
<li>
<a href="#menu_1_2"> Sous Menu 3.4</a>
</li>
</dd>
</dl>
</body>
</html>
Par Noult
0
-
Recommander
