Cum faci un meniu de restaurant sau o secțiune de cuprins în CSS?

meniu restaturant cod css

În articolul acesta voi scrie despre cum să faci o secțiun de cuprins sau fișă index folosind CSS. Este foarte utilă chestia la a crea meniuri pentru restaurant, cel puțin acolo am folosit eu chestia asta.

Și voi folos acest exemplu și aici:

  • Ciorbă de burtă
    8 lei

  • Salată de vinete
    8 lei

  • Bere la draft
    8 lei

  • Desert
    8 lei

  • Sandwich la pachet
    10 lei

În mod normal elementul de meniu și prețul încap pe același rând, dar la mine pe pagină vor apărea puțin decalate, pentu că trebuie să umblu și în CSSul blogului și… am și alte chestii de făcut :))
Garantez că dacă veți folosi aceste coduri, totul va merge cum trebuie. Iar dacă nu, puteți să îmi trimiteți un mail, iar eu vă voi răspunde cu ultimile noutăți muzicale cu care mă confrunt la momentul respectiv. DECI, MERGE!

Iată și codurile. Prima dată avem codul html:

<ul class=meniu>
<li><span>Ciorbă de burtă</span>
 <span>8 lei</span>
<li><span>Salată de vinete</span>
 <span>8 lei</span>
<li><span>Bere la draft</span>
 <span>8 lei</span>
<li><span>Desert</span>
 <span>8 lei</span>
<li><span>Sandwich la pachet</span>
 <span>10 lei</span>
</ul>

Apoi codul CSS

ul.meniu {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none;}
ul.meniu li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . .  "
 ". . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . .  "
 ". . . . . . . . . . . . . . . . . . "}
ul.meniu span:first-child {
    padding-right: 0.33em;
    background: white}
ul.meniu span + span {
    float: right;
    padding-left: 0.33em;
    background: white}

Și ast ar fi! Evident, codul poate fi implementat într-un script php dinamic sau ceva JS. Dar regulile CSS sunt acestea și pot deveni foarte utile.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *