header commerce

In this example below you will see how to do a header commerce with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by polinux, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright polinux ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>header commerce</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
	<div>
	  <a href="./"><img src="http://localhost/commerce/vavaou-galerie/img/Logo-VAVAOU.png" id="logo-vavaou"></a>
	  <div class="col-md-4-8 col-md-4 col-sm-4 col-xs-6 col-sp-12 ApColumn ">

		<!-- Block search module TOP -->
		<div id="search_block_top">
			<form id="searchbox" method="get">
				<input name="controller" value="search" type="hidden">
				<input name="orderby" value="position" type="hidden">
				<input name="orderway" value="desc" type="hidden">
				<input autocomplete="off" class="search_query form-control ac_input" id="search_query_top" name="search_query" placeholder="Recherche" value="" type="text">
				<button type="submit" name="submit_search" class="btn btn-outline-inverse fa fa-search">&nbsp;</button> 
			</form>
		</div>
		<!-- /Block search module TOP -->

      </div>
	  <div id="containerContact">
		<strong>Contactez nous</strong><small>appel gratuit : </small><br><span id="telEntete">+33 (0) 9 72 80 24 64</span>
	  </div>
	  <!--
	  <div class="col-lg-2-4 col-md-3 col-sm-4 col-xs-6 col-sp-12 ApColumn ">
                <!-- @file modules\appagebuilder\views\templates\hook\ApModule -->

		<!-- MODULE Block cart -->
		<div class="blockcart_top clearfix pull-right">
			<div id="cart" class="shopping_cart">
				<div class="media heading">
					<div class="cart-inner media-body">
						<a href="./cart.html" title="Voir mon panier" rel="nofollow">
							<span class="title-cart">Mon panier</span>
							<span style="display: inline;" class="ajax_cart_total unvisible">20.83</span>
							<span style="display: none;" class="ajax_cart_product_empty ajax_cart_no_product">0 item(s)</span>
							<span style="display: inline;" class="ajax_cart_quantity unvisible">1</span>
							<span style="display: inline;" class="ajax_cart_product_txt unvisible"> - article</span>
							<span style="display: none;" class="ajax_cart_product_txt_s unvisible"> - Article (s)</span>
						</a>
					</div>	
				</div>
				<div class="cart_block block exclusive">
					<div class="block_content">
						<!-- block list of products -->
						<div class="cart_block_list">
							<dl class="products"><dt data-id="cart_block_product_7_34_0" data-id_product="1167class=" first_item"=""> <a class="cart-images" href="#" title="Monopoly junior">    <img src="//jardin-enfants.com/99-home_default/img.jpg" alt="Monopoly junior">  </a>  <div class="cart-info">    <div class="product-name">      <span class="quantity-formated">        <span class="quantity">1</span>&nbsp;x&nbsp;</span>        <a class="cart_block_product_name" href="#" title="Monopoly junior">Monopoly junior</a>    </div>   <div class="product-atributes">     <a href="#" title="Détails de l'article">S, Yellow</a>    </div>    <span class="price">20,83&nbsp;€     <div class="hookDisplayProductPriceBlock-price"></div>   </span> </div>  <span class="remove_link">   <a class="ajax_cart_block_remove_link" href="#" rel="nofollow" title="supprimer cet article du panier" data-id_panier="67"> </a> </span></dt></dl>
							<p style="display: none;" class="cart_block_no_products">Aucun produit</p>
							<div class="cart-prices">
								<div class="cart-prices-line first-line">
									<span class="price cart_block_shipping_cost ajax_cart_shipping_cost unvisible">Être déterminé</span>
									<span class="unvisible">Livraison</span>
								</div>
								<div class="cart-prices-line last-line">
									<span class="price cart_block_total ajax_block_cart_total">20,83&nbsp;€</span>
									<span>Total</span>
								</div>
							</div>
							<p class="cart-buttons clearfix">
								<a id="button_order_cart" class="btn btn-warning button-medium button button-small pull-right" href="./cart.html" title="Passer la Commande" rel="nofollow">
									Commander ...
								</a>
							</p>
						</div>
					</div>
				</div><!-- .cart_block -->
			</div>
		</div>
	  </div>

	<div style="top: 0px; display: none;" id="layer_cart">
		<div class="clearfix">
			<div class="layer_cart_product col-xs-12 col-md-6">
				<span class="cross" title="Fermer la fenêtre"></span>
				<span class="title">
					<i class="fa fa-ok"></i>Produit ajouté à votre panier
				</span>
				<div class="product-image-container layer_cart_img">
					<img class="layer_cart_img img-responsive" src="http://lons.drivecommerces.fr/16-home_default/robe-ete-imprimee.jpg" alt="Robe d'été imprimée" title="Robe d'été imprimée">
				</div>
				<div class="layer_cart_product_info">
					<span id="layer_cart_product_title" class="product-name">Robe d'été imprimée</span>
					<span id="layer_cart_product_attributes">S, Jaune</span>
					<div>
						<strong class="dark">Quantité</strong>
						<span id="layer_cart_product_quantity">1</span>
					</div>
					<div>
						<strong class="dark">Total</strong>
						<span id="layer_cart_product_price">36,60 €</span>
					</div>
				</div>
			</div>
			<div class="layer_cart_cart col-xs-12 col-md-6">
				<span class="title">
					<!-- Plural Case [both cases are needed because page may be updated in Javascript] -->
					<span style="display: none;" class="ajax_cart_product_txt_s  unvisible">
						Il y a <span class="ajax_cart_quantity">1</span> produits dans votre panier.
					</span>
					<!-- Singular Case [both cases are needed because page may be updated in Javascript] -->
					<span class="ajax_cart_product_txt ">
						Il y a 1 article dans votre panier.
					</span>
				</span>
				<div class="layer_cart_row">
					<strong class="dark">Nombre de produits</strong>
					<span class="ajax_block_products_total">36,60 €</span>
				</div>

				<div class="layer_cart_row">
					<strong class="dark unvisible">Expédition totale </strong>
					<span class="ajax_cart_shipping_cost unvisible">Être déterminé</span>
				</div>
				<div class="layer_cart_row">
					<strong class="dark">Total</strong>
					<span class="ajax_block_cart_total">36,60 €</span>
				</div>
				<div class="button-container">	
					<span class="continue btn btn-outline btn-sm button exclusive-medium" title="Poursuivre les achats">
						<span>Poursuivre les achats</span>
					</span>
					<a class="btn btn-outline btn-sm button pull-right" href="http://lons.drivecommerces.fr/commande" title="Passer à la caisse" rel="nofollow">
						<span>Passer à la caisse</span>
					</a>
				</div>
			</div>
		</div>
		<div class="crossseling"></div>
	</div> <!-- #layer_cart -->
	<div style="width: 100%; height: 100%; display: none;" class="layer_cart_overlay"></div>

<!-- /MODULE Block cart -->
	  
		<input id="chkBurger" type="checkbox">
		<div id="containerImages">
		  <label for="chkBurger" style="text-align: baseline; display:flex; align-items: flex-end;margin-bottom: -8px; z-index: 50;">
			  <img src="./images/le_chien.png" style="max-width: 128px; ">
			  <div id="nav-icon1"><span></span><span></span><span></span></div>
		  </label>
		</div>
		  <nav class="loaded">
			<ul id="menu">
				<li>
					<a href="#"><img src="./img/user-5-32x32.png">mon compte</a>
				</li>
			<li style="background-color: rgb(79, 6, 171);"><a href="http://arts-et-artisanat.vavaou.fr">Art &amp; Artisanat</a><span style="background-color: rgb(79, 6, 171); transform: rotate(35deg) translate(436px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=10">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=10">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(79, 6, 171);"><a style="color: rgb(79, 6, 171);" href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=11">Ameublement &amp; décoration</a><ul><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=113">Arts de la Table</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=112">Mobiliers &amp; Luminaires</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=111">Objets décoratifs</a></li></ul></li></ul></td><td><ul><li style="color: rgb(79, 6, 171);"><a style="color: rgb(79, 6, 171);" href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=14">Arts visuels &amp; arts du spectacle</a><ul><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=142">Arts du spectacle</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=141">Arts visuels</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=144">Autres Arts</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=143">Instruments de musique</a></li></ul></li><li style="color: rgb(79, 6, 171);"><a style="color: rgb(79, 6, 171);" href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=15">Divers</a><ul><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=151">Articles fumeurs</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=152">Senteurs </a></li></ul></li></ul></td><td><ul><li style="color: rgb(79, 6, 171);"><a style="color: rgb(79, 6, 171);" href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=12">Bijouterie orfèvrerie &amp; horlogerie</a><ul><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=121">Bijouterie &amp; joaillerie</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=123">Horlogerie</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=122">Orfèvrerie</a></li></ul></li><li style="color: rgb(79, 6, 171);"><a style="color: rgb(79, 6, 171);" href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=13">Cuir tissus &amp; accessoires</a><ul><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=132">Mode &amp; accessoires de mode</a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=133">Sacs et maroquinerie </a></li><li><a href="http://arts-et-artisanat.vavaou.fr/espListeProd.php?cat=131">Textile Maison</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(254, 104, 149);"><a href="http://bebe-et-puericulture.vavaou.fr">Bébé &amp; Puériculture</a><span style="background-color: rgb(254, 104, 149); transform: rotate(35deg) translate(381px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=20">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=20">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=24">Éveil et sommeil</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=241">Jouets d’éveil</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=243">Mobilier &amp; accessoires </a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=242">Sièges &amp; transats</a></li></ul></li></ul></td><td><ul><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=21">Poussette &amp; porte-bébé</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=212">Porte-bébé</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=211">Poussettes</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=213">Sacs &amp; Accessoires</a></li></ul></li><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=22">Sièges Auto</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=224">Accessoires</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=221">Pour bébés </a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=223">Pour enfants</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=222">Pour petits</a></li></ul></li></ul></td><td><ul><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=26">Repas</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=263">Alimentation</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=261">Allaitement</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=262">Biberons &amp; sucettes</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=264">Vaisselle &amp; accessoires</a></li></ul></li><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=27">Sécurité</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=272">Baby phone </a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=271">Barrières de sécurité</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=274">Humidificateurs </a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=273">Sécurité domestique </a></li></ul></li><li style="color: rgb(254, 104, 149);"><a style="color: rgb(254, 104, 149);" href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=23">Toilette &amp; soins</a><ul><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=231">Bain</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=234">Hygiène et propreté</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=233">Santé</a></li><li><a href="http://bebe-et-puericulture.vavaou.fr/espListeProd.php?cat=232">Toilette</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(255, 182, 5);"><a href="http://culture-et-loisirs.vavaou.fr">Culture &amp; Loisirs</a><span style="background-color: rgb(255, 182, 5); transform: rotate(35deg) translate(326px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=30">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=30">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(255, 182, 5);"><a style="color: rgb(255, 182, 5);" href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=32">Livres &amp; Papeterie</a><ul><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=323">Beaux Arts </a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=321">Libraire</a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=324">Loisirs créatifs</a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=322">Papeterie &amp; Bureautique</a></li></ul></li></ul></td><td><ul><li style="color: rgb(255, 182, 5);"><a style="color: rgb(255, 182, 5);" href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=31">Toute la musique</a><ul><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=313">Disquaire</a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=312">Home studio &amp; deejaying</a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=311">Instruments de musique</a></li></ul></li></ul></td><td><ul><li style="color: rgb(255, 182, 5);"><a style="color: rgb(255, 182, 5);" href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=33">Toutes les Vidéos</a><ul><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=331">CD DVD &amp; Blu-ray</a></li><li><a href="http://culture-et-loisirs.vavaou.fr/espListeProd.php?cat=332">Streaming</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(129, 2, 5);"><a href="http://vins-et-gastronomie.vavaou.fr">Gastronomie &amp; Vins</a><span style="background-color: rgb(129, 2, 5); transform: rotate(35deg) translate(271px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=40">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=40">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(129, 2, 5);"><a style="color: rgb(129, 2, 5);" href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=43">Bières, cidres &amp; spiritueux</a><ul><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=431">Bières</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=432">Cidres</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=434">Spiritueux composés</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=433">Spiritueux simples</a></li></ul></li></ul></td><td><ul><li style="color: rgb(129, 2, 5);"><a style="color: rgb(129, 2, 5);" href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=41">Gastronomie</a><ul><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=414">Autres cuisines</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=413">Cuisines anciennes</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=412">Cuisines du monde</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=411">Gastronomie Française</a></li></ul></li></ul></td><td><ul><li style="color: rgb(129, 2, 5);"><a style="color: rgb(129, 2, 5);" href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=42">Vins &amp; Champagnes</a><ul><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=423">Champagnes et mousseux</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=424">Grands crus</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=421">Vins de France</a></li><li><a href="http://vins-et-gastronomie.vavaou.fr/espListeProd.php?cat=422">Vins du monde</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(1, 102, 254);"><a href="http://hightech-et-multimedia.vavaou.fr">Multimédia &amp; Hight-Tech</a><span style="background-color: rgb(1, 102, 254); transform: rotate(35deg) translate(216px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=50">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=50">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(1, 102, 254);"><a style="color: rgb(1, 102, 254);" href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=55">E-cigarettes</a><ul><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=554">Accessoires</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=551">Cigarettes électroniques</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=552">E-liquides</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=553">Mods</a></li></ul></li></ul></td><td><ul><li style="color: rgb(1, 102, 254);"><a style="color: rgb(1, 102, 254);" href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=51">Image &amp; son</a><ul><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=513">Blu-ray et DVD</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=514">Casques audio et mp3</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=512">hi-fi &amp; home cinéma </a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=511">Téléviseurs et vidéoprojection</a></li></ul></li><li style="color: rgb(1, 102, 254);"><a style="color: rgb(1, 102, 254);" href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=54">téléphonie et GPS</a><ul><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=542">GPS &amp; assistant </a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=543">Objets connectés </a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=541">Téléphones </a></li></ul></li></ul></td><td><ul><li style="color: rgb(1, 102, 254);"><a style="color: rgb(1, 102, 254);" href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=53">informatique</a><ul><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=534">Accessoires &amp; consommables</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=533">Composants &amp; stockage</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=531">Ordinateurs</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=532">Périphériques  </a></li></ul></li><li style="color: rgb(1, 102, 254);"><a style="color: rgb(1, 102, 254);" href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=52">photo &amp; vidéo</a><ul><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=523">Accessoires photo &amp; vidéo</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=521">Appareil photo &amp; caméscopes</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=524">Astronomie</a></li><li><a href="http://hightech-et-multimedia.vavaou.fr/espListeProd.php?cat=522">Objectifs </a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(228, 61, 106);"><a href="http://jeux-et-jouets.vavaou.fr">Jeux &amp; Jouets</a><span style="background-color: rgb(228, 61, 106); transform: rotate(35deg) translate(161px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=60">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=60">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(228, 61, 106);"><a style="color: rgb(228, 61, 106);" href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=63">Consoles &amp; Jeux vidéos</a><ul><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=631">Consoles</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=632">Jeux consoles</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=633">Jeux pc</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=634">Produits dérivés</a></li></ul></li></ul></td><td><ul><li style="color: rgb(228, 61, 106);"><a style="color: rgb(228, 61, 106);" href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=61">Jeux &amp; Jeux de société</a><ul><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=613">Jeux de plein air</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=611">Jeux de société</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=612">Modélisme et robotique</a></li></ul></li></ul></td><td><ul><li style="color: rgb(228, 61, 106);"><a style="color: rgb(228, 61, 106);" href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=62">Jouets</a><ul><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=621">Âge</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=623">Allées</a></li><li><a href="http://jeux-et-jouets.vavaou.fr/espListeProd.php?cat=622">Marques</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(76, 4, 173);"><a href="http://mode-et-accessoires.vavaou.fr">Mode &amp; Accessoires</a><span style="background-color: rgb(76, 4, 173); transform: rotate(35deg) translate(106px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=70">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=70">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(76, 4, 173);"><a style="color: rgb(76, 4, 173);" href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=73">Mode enfant</a><ul><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=733">Accessoires enfants</a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=732">Chaussures enfants </a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=731">Vêtements enfants</a></li></ul></li></ul></td><td><ul><li style="color: rgb(76, 4, 173);"><a style="color: rgb(76, 4, 173);" href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=71">Mode Femme</a><ul><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=712">Accessoires Femme</a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=714">Chaussures femme</a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=713">Maroquinerie femme </a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=711">Vêtements femme</a></li></ul></li></ul></td><td><ul><li style="color: rgb(76, 4, 173);"><a style="color: rgb(76, 4, 173);" href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=72">Mode homme</a><ul><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=722">Accessoires homme </a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=724">Chaussures homme</a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=723">Maroquinerie homme</a></li><li><a href="http://mode-et-accessoires.vavaou.fr/espListeProd.php?cat=721">Vêtements homme</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(109, 138, 156);"><a href="http://sport-et-bien-etre.vavaou.fr">Sports &amp; Bien-Etre</a><span style="background-color: rgb(109, 138, 156); transform: rotate(35deg) translate(51px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=80">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=80">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(109, 138, 156);"><a style="color: rgb(109, 138, 156);" href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=84">Hygiène</a><ul><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=841">Hygiène corporelle</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=843">Rasage &amp; épilation </a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=842">Soin dentaire </a></li></ul></li></ul></td><td><ul><li style="color: rgb(109, 138, 156);"><a style="color: rgb(109, 138, 156);" href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=81">Santé</a><ul><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=812">Médicaments</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=811">Parapharmacie </a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=814">Santé connectée</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=813">Vétérinaire</a></li></ul></li><li style="color: rgb(109, 138, 156);"><a style="color: rgb(109, 138, 156);" href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=82">Sport</a><ul><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=823">Accessoires sportifs </a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=821">Les sports</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=822">Vêtements de sport</a></li></ul></li></ul></td><td><ul><li style="color: rgb(109, 138, 156);"><a style="color: rgb(109, 138, 156);" href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=83">Soin &amp; beauté</a><ul><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=832">Beauté </a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=833">Bien-être</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=834">Minceur</a></li></ul></li><li style="color: rgb(109, 138, 156);"><a style="color: rgb(109, 138, 156);" href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=85">Soin des cheveux</a><ul><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=854">Accessoires coiffure</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=852">Appareils et outils de coiffure</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=853">Produits coiffants</a></li><li><a href="http://sport-et-bien-etre.vavaou.fr/espListeProd.php?cat=851">Shampoings &amp; après-shampoings</a></li></ul></li></ul></td></tr></tbody></table></div></span></li><li style="background-color: rgb(204, 203, 1);"><a href="http://maison-et-decoration.vavaou.fr">l'Univers de la Maison</a><span style="background-color: rgb(204, 203, 1); transform: rotate(35deg) translate(-4px, -156px);"><div class="divEspaceLeft"><ul><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=90">lien vers boutique du rayon</a></li><li><a href="http://www.vavaou.fr/lesCommercants.php?rayon=90">lien vers boutique regionale du rayon</a></li><li><a href="#">lien vers pub</a></li></ul></div><div class="divEspaceCenter"><table><tbody><tr><td><ul><li style="color: rgb(204, 203, 1);"><a style="color: rgb(204, 203, 1);" href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=94">Espace bricolage</a><ul><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=942">Équipements</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=943">Matériaux</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=941">Outillage &amp; quincaillerie</a></li></ul></li></ul></td><td><ul><li style="color: rgb(204, 203, 1);"><a style="color: rgb(204, 203, 1);" href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=92">jardin &amp; Animalerie</a><ul><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=923">Animalerie</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=922">Jardinage</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=921">Meubles jardin</a></li></ul></li></ul></td><td><ul><li style="color: rgb(204, 203, 1);"><a style="color: rgb(204, 203, 1);" href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=93">Piscine &amp; Accessoires</a><ul><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=934">Accessoires piscine</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=933">Équipement piscine</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=931">Les piscines</a></li><li><a href="http://maison-et-decoration.vavaou.fr/espListeProd.php?cat=932">Sécurité Piscines</a></li></ul></li></ul></td></tr></tbody></table></div></span></li></ul>
		  </nav>
	</header>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/polinux/header-commerce-bwqQzb */
header > div > a img, header > div > img {
	/* margin: 0 0 -6em 0; */
  width: 100%;
}
header nav {
  display: none;
}

#search_block_top .fa-search {
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  background: #fcfcfc;
  padding: 7px;
  width: 36px;
  height: 36px;
  color: #FFF;
  font-family: "FontAwesome";
}
#search_block_top .fa-search:hover {
  cursor: pointer;
}
#search_block_top form{
	margin: 8px;
}
form#searchbox input.search_query {
	width: 96%;
  float: right;
	height: 36px;
	border: 2px solid #00a9e0;
	border-radius: 30px 30px 0px 30px;
	padding: 0 12px;
}
form#searchbox .btn {
	background: #00a9e0;
	border-color: #00a9e0;
	border-radius: 100% 100% 0 100%;
	margin-left: 5px;
	position: absolute;
	margin-top: 2px;
	right: 4%;
}

.fa-search {
	content: "🔍";
	font-size: 2em;
	color: #ccc;
/*		top: 0;
position: absolute;*/
	right: 8px;
}

#containerContact::before {
	content: "📞";
	font-size: 2em;
	color: #ccc;
	top: 0;
	position: absolute;
	left: 8px;
  clear :both;
}
	
	
#containerContact {
	position: relative;
	padding-left: 28px;
	font-weight: bold;
	width: 220px;
	/* margin-top: 16px; */
	/* margin-bottom: -16px; */
}

Comments