Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[tuto] Design - menu façon Dock OSX

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Avatar de l’utilisateur
noodom
Actif
Messages : 982
Inscription : 13 juil. 2014, 17:25
Contact :

[tuto] Design - menu façon Dock OSX

Message par noodom » 29 juil. 2019, 13:52

Salut,

Je vous propose un menu style dock Mac pour ajouter dans un Design.
dock.png
dock.png (58.58 Kio) Consulté 2357 fois
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>

jerome6994
Timide
Messages : 360
Inscription : 04 juin 2019, 12:36
Localisation : Lyon

Re: [tuto] Design - menu façon Dock OSX

Message par jerome6994 » 30 juil. 2019, 07:36

Bonjour,

Super Partage j'adore étant sous mac :)
RPI 3 B+ : Jeedom 3.3.32 - Z-Wave + : Z-Stick GEN5 - Aeon Labs - RFXCom - ZiGate USB-TTL ZigBee®
IOT : Station Météo, Thermostat, Vannes Netatmo, Volets Profalux, Prises DI-O, Somfy Home Alarm, Hue, Fibaro

Linda5961
Timide
Messages : 1
Inscription : 29 août 2019, 07:47

Re: [tuto] Design - menu façon Dock OSX

Message par Linda5961 » 29 août 2019, 07:49

Thanks for the code and tutorial about OSX Dock Menu.

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité