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.

Ons Menu

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);
}

Maak op de pagina een rij met twee of drie kolommen. In de eerste kolom zet je een module tekst. Bij de tekst instellingen schakel je van Visueel naar tekst en zet daar de volgende “code”in:
Wijzig de volgende tekst: DE-URL-VAN-DE-AFBEELDING met de echt url, bijvoorbeeld: “wp-content/uploads/2018/04/dessert-444678_1920-1.jpg”

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.

[et_bloom_locked optin_id=optin_4]Download de sectie met de alternatieve menukaart [/et_bloom_locked]