CSS meni

9 naročnikov

Ker sem popolnoma nov v tem programskem jeziku me zanima, kako v css sprogramirati takšen meni. Se ukvarjam s tem menijem vsaj dve uri pa mi ne rata. Nekaj primerkov menijev se sicer da dobiti na netu ampak se ne znam z njimi nič pomagati.

Vsak link v html je <li>, potem pa jih s css oblikuješ. Display: block; float: left; width, height...

Meni strukturiraš s pomočjo ul in li značk. Preko ul značke določiš širino menija, ozadje, pisavo itd.

ul {
  width: 800px;
  background: #000;
  font-family: 'Arial';
}

Ker je li značka v osnovi namenjena seznamom in zato prikazuje tiste grde črne pike (bullete), jih odstraniš s pomočjo list-style, nastaviš display na inline-block (da bo klikabilen cel gumb, ne samo tekst) ter dodaš malo paddinga, da ne bo vse skupaj natlačeno.

ul li {
  list-style: none;
  display: inline-block;
  padding: 10px 0;
}

Oblikuješ še linke ter mouse-over event

ul li a {
  padding: 10px 30px;
  text-decoration: none;
  font-size: 2em;
  color: #fff;
}
ul li a:hover {
  color:#000;
  background: #dd5627;
}

Na koncu CSS izgleda takole:

ul {
  width: 800px;
  background: #000;
  font-family: 'Arial';
}
ul li {
  list-style: none;
  display: inline-block;
  padding: 10px 0;
}
ul li a {
  padding: 10px 30px;
  text-decoration: none;
  font-size: 2em;
  color: #fff;
}
ul li a:hover {
  color:#000;
  background: #dd5627;
}

Na hitro spišeš še HTML in voila ... najbolj osnoven meni ;)

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Building</a></li>
  <li><a href="#">Buying</a></li>
  <li><a href="#">Selling</a></li>
  <li><a href="#">Moving</a></li>
</ul>

Potem se lahko igraš še z raznimi transitioni in podobnimi zadevami za kakšne fancy efekte, ampak v osnovi je to to.

blurp_blurp najlepša hvala za kodo in razlago ;)

Če mogoče (še) ne veš.

Za izbiro barvnih kombinacij/palet je meni super stran Color lovers, kjer je že narejenih res veliko barvnih kombinacij. Za iskanje barvne kode pa ColorHexa.

Za razlago posameznih pojmov (padding, margins, borders, itd) pa seveda W3schools. Skoraj ni stvari, ki je ne nadeš gor.

Mogoče pa pride še komu drugemu prav.

Samo toliko v opozorilo da W3Cschools ni najbolj kredibilen vir. Sicer naj bi se zadeva kar popravila vseeno pa ni treba vsega kar tam piše vzeti za sveto.

Poglej na http://www.w3fools.com/ za druge vire.

Pa ne me narobe razumet W3C je čist kul za učenje osnov, za kaj več pa res priporočam kakšen drug vir.

Na wordpress sem naložil temo, ki ima en bug, in sicer pri drop-down meniju. Meni se normalno prikaže, ko grem čez z miško, nato pa se noče skriti. Sam ne najdem napake, na supportu pa še vedno niso poslali rešitve. Ima kdo od vas kakšno idejo, kako rešiti meni?http://proteus-belakrajina.si/

Na hitro sem malo pogledal kodo. Za meni se uporablja Yamm!3, ki v osnovi drop-down menija ne prikaže ob hoverju temveč ob kliku. Na spletu je nekaj predelav menija, ki zadevo spremeni v stanje kot ga ima ta tema, očitno pa pri temi predelava ni bila izvedena najbolje. Poskusi si pomagati s tole kodo.

harmonik:
Na wordpress sem naložil temo, ki ima en bug, in sicer pri drop-down meniju. Meni se normalno prikaže, ko grem čez z miško, nato pa se noče skriti. Sam ne najdem napake, na supportu pa še vedno niso poslali rešitve. Ima kdo od vas kakšno idejo, kako rešiti meni?http://proteus-belakrajina.si/

V http://proteus-belakrajina.si/wp-content/themes/guardian/js/menu.js?ver=4.1.5 dodaj tam pri 50 vrstici teh par vrstic:

oMenus.on({'mouseleave touchend': function(event) {
    event.preventDefault();
    oMenus.removeClass('open');
    },
});

Načeloma nimaš eventa ko zapustiš meni, razen ko odpre novega zapreš vse podmenije.

Dandanes je smiselno delati z html5, tako da ne pozabi na nav tag:

<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Building</a></li>
  <li><a href="#">Buying</a></li>
  <li><a href="#">Selling</a></li>
  <li><a href="#">Moving</a></li>
</ul>
</nav>

Pa ul list je odvečen (stvar debate ), tako da še bolje je narediti:

<nav>
  <a href="#">Home</a>
  <a href="#">Building</a>
  <a href="#">Buying</a>
  <a href="#">Selling</a>
  <a href="#">Moving</a>
</nav>

manj balasta kode :)

carli, hvala ta natančno pomoč. In seveda tudi ostalim. Zdaj deluje :)