Een alternative menukaart
Naar aanleiding van de one page lay-out voor een restaurant van Elegant Webdesign heb ik een alternatief gemaakt voor de sectie “Menu”. De standaard menukaart is duidelijk, tekst, prijs en klaar. Maar het kan ook “mooier”. Met een afbeelding van het gerecht en als je daar met de cursor overheen beweegt komt de tekst en de prijs in beeld. Zie het voorbeeld hieronder.
Onder dit voorbeeld is de werkwijze te vinden als je dit zelf ook wilt maken. Ook kan je dit voorbeeld downloaden en gebruik op je eigen pagina door de teksten en afbeeldingen aan te passen.
Carpaccio
van runderlende met pesto, Parmezaanse kaas en pijnboompitten
€ 11.50
Spareribs
Heerlijke gemarineerde spareribs met diverse sausjes
€ 18.50
Crème Brûlée
gekarameliseerd met rietsuiker met een bolletje vanille ijs en slagroom
€ 6.50
Carpaccio
Carpaccio
van runderlende met pesto, Parmezaanse kaas en pijnboompitten
€ 11.50
Spareribs
Spareribs
Heerlijke gemarineerde spareribs met diverse sausjes
€ 18.50
Crème Brûlée
Crème Brûlée
gekarameliseerd met rietsuiker met een bolletje
vanille ijs en slagroom
€ 6.50
De werkwijze
Om dit voor elkaar te krijgen moet je een stukje CSS in de pagina istellingen invoegen bij “Geavanceerd -> Aangepaste CSS”
Dit is de code: (Kopieer en plak)
.hover-bio-wrapper {
position: relative;
color: rgba(0,0,0,0);
width: 100%
}
figure.hover-bio img{
display: block;
}
figure.hover-bio {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
display: inline-block;
line-height: 0;
}
figure.hover-bio::before, figure.hover-bio::after{
position: absolute;
background: black;
opacity: 0.3;
content: ”;
height: 100%;
width: 100%;
display: block;
top: 0;
left 0;
-moz-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
figure.hover-bio figcaption{
position: absolute;
background: #fff;
display: block;
line-height: 1.7em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
padding: 10px;
z-index: 100;
width: 100%;
max-height: 100%;
overflow: hidden;
top: 50%;
left: 0;
-moz-transform: translate3d(-100%, -50%, 0);
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0);
opacity: 0;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
figure.hover-bio img{
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
figure.hover-bio figcaption{
top: 100%;
opacity: 1;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.hover-bio:hover img {
opacity: .9;
}
figure.hover-bio:hover figcaption{
background-color: #000000;
color: #fff;
opacity: 1;
-moz-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
transition: all 0.8s;
box-shadow: 0px -2px 28px rgba(255,255,255, 0.3);
}
Vervang vervolgens de teksten “Gerecht” , “Omschrijving van het gerecht” en “€6,50” voor de tekst die jij gaat gebruiken. Sla dit op en kopieer de module zo veel als je nodig heb.
Verder kan je de module verder stijlen door bijvoorbeeld een rand toe te voegen of schaduw.
Wil je aan de slag met het voorbeeld? Download dan het bestand.
Heb je vragen naar aanleiding van deze blog? Stle ze gerust. Dat kan in het forum of via Facebook.