Bonjour tous les abonnes de Live Geek aujourd'hui je vais vous apprendre a creer des menus deroulants hyper sofistiquees comme celui de snapdeal.com
Pour cela nous aurons besoin de connaissances en Html5 css3 et aussi du javascript ok sans plus tarder nous allons nous lancer .
Nous allons dabord commencer par creer un menu horizontal comme celui de Snapdeal ceci demande just un pe de Html et de Css notre menu devrait ressembler a ceci
Pour ce qui voudraient le code html et le code css pour obtenir cette page il se trouce ci dessous
Code Html5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="niveau1.css"/>
<meta charset="utf-8"/>
</head>
<body>
<div id="bloc1">
<ul id="liste">
<a href="www.google.fr" id="menu"> Menu</a><br/>
<a href="www.google.fr" id="lien1"> Desktop</a><br/>
<a href="www.google.fr" id="lien1"> Laptop</a><br/>
<a href="www.google.fr" id="lien3"> MI4 </a><br/>
<a href="www.google.fr" id="lien1"> Nokia</a><br/>
<a href="www.google.fr" id="lien1"> Samsung</a><br/>
<a href="www.google.fr" id="lien1"> Iphone</a><br/>
<a href="www.google.fr" id="lien1"> Huawei</a><br/>
<a href="www.google.fr" id="lien1"> Techno</a><br/>
<a href="www.google.fr" id="lien1">Acer </a><br/>
<a href="www.google.fr" id="lien1"> DELL</a><br/>
</ul>
</div>
<script src="listederoulante.js"></script>
</body>
</html>
Code Css3
#lien1
{
display:block;
width:100px;
text-decoration:none;
color:black;
border-bottom:1px solid black;
font-style:italic;
}
#menu
{
display:block;
width:120px;
text-decoration:none;
color:black;
border-bottom:1px solid black;
padding-bottom:10px;
}
#lien3
{
border-bottom:1px solid black;
display:block;
height:30px;
text-decoration:none;
font-style:italic;
color:black;
}
OK Une fois le menu creer nous allons maintenant faire un pe de javascript ok comme nous l'avons vu dans le Menu de snapdeal.com lorsque nous survolons un element du menu cela craie automatiquement un nouvel element avec d'autres elements a l'interieur cela peut etre des liens ou des images ou meme les deux a la fois comme le montre la figure suivante
ici nous avon survoler l'element Mi4 et cela a creer automatiquement ce cadre contenant lui meme d'autres menus et des images vous pouvez voir la differnce entre cette image et l'image precedente
ok ce turoriel nous montrera comment creer cet element lorsqu'on survole l'element Mi4
C'est tres facile pour pouvoir le faire c'est la que le javascript entre en jeu
Si vous avez ete attentif au code Html precedent vous avez pu voir que l'element Mi4 du menu a pour id "lien3" nous allons nous servir de cet id dans notre code javascript
voici le code Javascript complet pour le faire
Code Javascript
var recuperer = document.getElementById("lien3");
recuperer.addEventListener('mouseover',function(e){
var division = document.createElement("div");
division.id="derouler";
var contenu1 = document.createElement("ul");
contenu1.id="contenu1";
var element1 = document.createElement("li");
element1.id="element0";
var interieur1 = document.createTextNode("Appareil");
element1.appendChild(interieur1);
contenu1.appendChild(element1);
var element2 = document.createElement("li");
element2.id="element1";
var interieur2 = document.createTextNode("laptop samsung");
element2.appendChild(interieur2);
contenu1.appendChild(element2);
var element3 = document.createElement("li");
element3.id="element1";
var interieur3 = document.createTextNode(" laptop lenovo");
element3.appendChild(interieur3);
contenu1.appendChild(element3);
var element4 = document.createElement("li");
element4.id="element1";
var interieur4 = document.createTextNode("laptop acer");
element4.appendChild(interieur4);
contenu1.appendChild(element4);
var element5 = document.createElement("li");
element5.id="element1";
var interieur5 = document.createTextNode("Mac Book pro");
element5.appendChild(interieur5);
contenu1.appendChild(element5);
var element6 = document.createElement("li");
element6.id="element1";
var interieur6 = document.createTextNode("IPAD 3");
element6.appendChild(interieur6);
contenu1.appendChild(element6);
var element7 = document.createElement("li");
element7.id="element1";
var interieur7 = document.createTextNode("Iphone6");
element7.appendChild(interieur7);
contenu1.appendChild(element7);
var element8 = document.createElement("li");
element8.id="element1";
var interieur8 = document.createTextNode("Iphone5");
element8.appendChild(interieur8);
contenu1.appendChild(element8);
var element9 = document.createElement("li");
element9.id="element1";
var interieur9 = document.createTextNode("Iphone4");
element9.appendChild(interieur9);
contenu1.appendChild(element9);
var element10 = document.createElement("li");
element10.id="element1";
var interieur10 = document.createTextNode("iphone4s");
element10.appendChild(interieur10);
contenu1.appendChild(element10);
division.appendChild(contenu1);
var contenu2 = document.createElement("ul");
contenu2.id="contenu2";
var element1 = document.createElement("li");
element1.id="element0";
var interieur1 = document.createTextNode("Chaussures");
element1.appendChild(interieur1);
contenu2.appendChild(element1);
var element2 = document.createElement("li");
element2.id="element1";
var interieur2 = document.createTextNode("Vans");
element2.appendChild(interieur2);
contenu2.appendChild(element2);
var element3 = document.createElement("li");
element3.id="element1";
var interieur3 = document.createTextNode(" Air force");
element3.appendChild(interieur3);
contenu2.appendChild(element3);
var element4 = document.createElement("li");
element4.id="element1";
var interieur4 = document.createTextNode("Air yeezy");
element4.appendChild(interieur4);
contenu2.appendChild(element4);
var element5 = document.createElement("li");
element5.id="element1";
var interieur5 = document.createTextNode("Air Max");
element5.appendChild(interieur5);
contenu2.appendChild(element5);
var element6 = document.createElement("li");
element6.id="element1";
var interieur6 = document.createTextNode("Jordan 23");
element6.appendChild(interieur6);
contenu2.appendChild(element6);
var element7 = document.createElement("li");
element7.id="element1";
var interieur7 = document.createTextNode("Zannoti");
element7.appendChild(interieur7);
contenu2.appendChild(element7);
var element8 = document.createElement("li");
element8.id="element1";
var interieur8 = document.createTextNode("Moccasin");
element8.appendChild(interieur8);
contenu2.appendChild(element8);
var element9 = document.createElement("li");
element9.id="element1";
var interieur9 = document.createTextNode("Reeboock");
element9.appendChild(interieur9);
contenu2.appendChild(element9);
var element10 = document.createElement("li");
element10.id="element1";
var interieur10 = document.createTextNode("Nike");
element10.appendChild(interieur10);
contenu2.appendChild(element10);
division.appendChild(contenu2);
var contenu3 = document.createElement("ul");
contenu3.id="contenu3";
var element1 = document.createElement("li");
element1.id="element0";
var interieur1 = document.createTextNode(" Voitures");
element1.appendChild(interieur1);
contenu3.appendChild(element1);
var element2 = document.createElement("li");
element2.id="element1";
var interieur2 = document.createTextNode("Mercedes");
element2.appendChild(interieur2);
contenu3.appendChild(element2);
var element3 = document.createElement("li");
element3.id="element1";
var interieur3 = document.createTextNode(" Toyota");
element3.appendChild(interieur3);
contenu3.appendChild(element3);
var element4 = document.createElement("li");
element4.id="element1";
var interieur4 = document.createTextNode("Ford Matis");
element4.appendChild(interieur4);
contenu3.appendChild(element4);
division.appendChild(contenu3);
var image1 = document.createElement("img");
image1.src="lenovo-smartphone-vibe-z-front-3 (1).jpg";
image1.id="image1";
division.appendChild(image1);
var image2 = document.createElement("img");
image2.src="wall-shelves-offer-snapdeal.jpg";
image2.id="image2";
division.appendChild(image2);
document.body.appendChild(division);
},false);
Bon un peu d'esplication s'impose au niveau de la premiere ligne de code on recupere l'element Mi4 a travers son id qui est "lien3" Une fois recuperer on va creer un evenement lorsqu'on va survoler l'element Mi4 la fonction que j'ai creer va se declancher et va se charger de creer tous les elements du bloc a afficher lors du survol et le tour est jouer pour ceux qui ont deja bien appris le javascript ce code devrait etre facile a assimiler et a comprendre .oupss J'avais failli oublier puisque nous avons creer de nouveaux elements Html nous devons forcement bien les disposer sur sa page grace au css voici donc le code Css3 complet
Code Css3
#lien1
{
display:block;
width:100px;
text-decoration:none;
color:black;
border-bottom:1px solid black;
font-style:italic;
}
#menu
{
display:block;
width:120px;
text-decoration:none;
color:black;
border-bottom:1px solid black;
padding-bottom:10px;
}
#lien3
{
border-bottom:1px solid black;
display:block;
height:30px;
text-decoration:none;
font-style:italic;
color:black;
}
#lien3:hover
{
border-bottom:1px solid black;
display:block;
width:150px;
height:40px;
text-decoration:none;
font-style:italic;
color:black;
background-color:rgb(237,234,247);
}
#element1
{
display:block;
width:100px;
text-decoration:none;
font-style:italic;
color:black;
margin:20px;
}
#element0
{
display:block;
width:100px;
font-size:20px;
text-decoration:none;
font-style:italic;
color:black;
margin:20px;
border-bottom:1px solid black;
}
#liste
{
border:1px solid black;
width:150px;
background-color:white;
}
body
{
background-color:rgb(237,234,247);
}
#derouler
{
position:absolute;
top:0px;
left:200px;
border:1px solid black;
width:900px;
height:450px;
background-image:url("this-is-for-the-player-cover-880x400.jpg");
}
#contenu1
{
position:absolute;
top:0px;
left:-5px;
background-color:rgb(237,234,247);
}
#contenu2
{
position:absolute;
top:0px;
left:200px;
background-color:rgb(237,234,247);
}
#contenu3
{
position:absolute;
top:0px;
left:400px;
background-color:rgb(237,234,247);
}
#image1
{
display:block;
width:200px;
height:200px;
position:absolute;
top:10px;
right:50px;
}
#image2
{
display:block;
width:200px;
height:200px;
position:absolute;
top:230px;
right:50px;
}
OK nous voila arriver au terme de ce tuto vos commentaires et suggestion seront les bienvenus et n'oubliez pas de partager cet article sur facebook merci
No comments:
Post a Comment