Je vous propose un menu style dock Mac pour ajouter dans un Design.
Depuis un design, il suffit de faire "Ajouter texte/html" et d'inclure le code HTML
et mettre une taille de 800*130
Il faudra adapter avec ses propres icônes et modifier les liens vers ses propres pages de design.
(reprendre les explications de mon dernier tuto : viewtopic.php?f=25&t=43549&p=729121)
Code : Tout sélectionner
<html>
<head>
<title>Design Dock Mac</title>
<style>
body {
height:100%;
width:100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/blurbg.png) no-repeat;
background-size: cover;
}
#osxdock-page {
color: #fff;
padding-bottom: 2em;
margin-bottom: -2em;
}
#osxdock-page h1,#osxdock-page h2 {
color: #fff;
}
div.cap {
display: block;
height: 100px;
width: 40px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/dock-background-left.png) bottom left no-repeat;
}
div.cap.left {
position: absolute;
bottom: 0px;
left: 0px;
}
div.cap.right {
background-position: right bottom;
position: absolute;
top: 0px;
right: 0px;
}
ul.osx-dock {
display: inline-block;
height: 130px;
padding: 0 40px 0 0;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/dock-background-left.png) no-repeat right bottom;
overflow: hidden;
margin: 0 0 0 40px;
}
ul.osx-dock li {
display: block;
position: relative;
float: left;
width: 50px;
height: 50px;
margin: 60px 0 4px 0;
-webkit-transition: 0.15s linear;
-webkit-transition-property: -webkit-transform margin;
text-align: center;
}
ul.osx-dock li a {
display: block;
height: 50px;
padding: 0 1px;
-webkit-transition: 0.15s linear;
-webkit-transition-property: -webkit-transform margin;
margin: 0;
-webkit-box-reflect: below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.45,transparent),to(rgba(255,255,255,0.25)));
}
ul.osx-dock li a img {
width: 48px;
}
ul.osx-dock li:hover {
margin-left: 9px;
margin-right: 9px;
z-index: 200;
}
ul.osx-dock li:hover a {
-webkit-transform-origin: center bottom;
-webkit-transform: scale(1.5);
}
ul.osx-dock li.nearby {
margin-left: 6px;
margin-right: 6px;
z-index: 100;
}
ul.osx-dock li.nearby a {
-webkit-transform-origin: center bottom;
-webkit-transform: scale(1.25);
}
ul.osx-dock li span {
background: rgba(0,0,0,0.75);
position: absolute;
bottom: 80px;
margin: 0 auto;
display: none;
width: auto;
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
-webkit-border-radius: 6px;
color: #fff;
}
ul.osx-dock li:hover span {
display: block;
}
div#dockContainer {
position: fixed;
bottom: 12px;
height: 120px;
padding: 50px 0 0;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
width: 100%;
line-height: 1;
z-index: 100;
}
div#dockWrapper {
width: auto;
display: inline-block;
position: relative;
border-bottom: solid 2px rgba(255,255,255,.35);
line-height: 0;
}
#dockContainer,#dockContainer * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>
<script language="javascript">
$(document).ready(function(){
$("ul.osx-dock li").each(function (type) {
$(this).hover(function () {
$(this).prev("li").addClass("nearby");
$(this).next("li").addClass("nearby");
},
function () {
$(this).prev("li").removeClass("nearby");
$(this).next("li").removeClass("nearby");
});
});
});
// Affichage du plan idPlan
function gotoPlan(idPlan) {
planHeader_id = idPlan;
displayPlan();
}
</script>
</head>
<body>
<div id="dockContainer">
<div id="dockWrapper">
<ul class="osx-dock">
<li class="active">
<a onClick="gotoPlan(39);" target="_blank" title="Accueil"><img
src="montheme/images/icon_mini_jeedom.png" />
</a>
</li>
<li>
<a onClick="gotoPlan(40);" target="_blank" title="Rdc"><img
src="montheme/images/icon_rdc.png" /></a>
</li>
<li>
<a onClick="gotoPlan(41);" target="_blank" title="Etage"><img
src="montheme/images/icon_etage.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="TV"><img
src="montheme/images/icon_tv.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="Volets"><img
src="montheme/images/icon_volets_light.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="Chauffage"><img
src="montheme/images/icon_chauffage.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="Réseau"><img
src="montheme/images/icon_reseau.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="Planning"><img
src="montheme/images/icon_planning.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/google-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/chrome-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/safari-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/lastfm-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/notable-icon.png" /></a>
</li>
<li class="active">
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/linkedin-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/facebook-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/google-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/chrome-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/safari-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/lastfm-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/notable-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/facebook-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/google-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/chrome-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/safari-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/lastfm-icon.png" /></a>
</li>
<li>
<a onClick="gotoPlan(39);" target="_blank" title="nom Menu"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/notable-icon.png" /></a>
</li>
</ul>
</div>
</div>
</body>
</html>