vejskilt   CSS menuer



CSS-menuer består typisk af 2 dele:

  • En traditionel <ul>-liste med undermenuer som indlejringer.
  • En til tider ganske kompleks CSS-opbygning


xca 100 css-menuer
xca. 30 css-menuer (og 20 css-knapper)
xEksempel på css-opsætning af simpel menu og nedbrydning i komponenter.


CSS-opbygning

På den ene side er CSS-delen af opbygningen af en menu ganske kompleks. På den anden side er der et stort udbud af CSS-baserede menustrukturer - både freeware og payware. Det vil derfor nok generelt være mest hensigtsmæssigt, at finde en menu der passer til den aktuelle situation, og så lade sig inspirere af den.


Mere komplekse menuer kan udover en ul-liste og css også have tilføjet list javaScript / jQuery.


For at undgå for stor kompleksitet på CSS-området, kan det være hensigtsmæssigt, at gemme CSS-dataene til menuen i sin egen fil.



Listestruktur

Listestrukturen med selve menuen er man for det første nødt til at lave og vedligeholde selv. Dernæst vil den samme liste kunne bruges uanset hvilken CSS-styring, der ligger ovenover.


En hierarkisk listestruktur opbygges af et antal <ul>-lister:


<ul>
    <li<  ........ </li>
    <li<  ........ </li>
    <li<  ........ </li>
    <li<  ........ </li>
    <li<  ........ </li>
</ul>

Hver linie i en sådan lige liste kan indeholde et link - <a>-tag - til andetsteds på sitet eller udenfor


Når en listelinie imidlertid ikke skal indeholde et link, men være "ankerholder" for en undermenu skal den "knækkes" (De 2 gule markeringer) og en liste til undermenuen lægges ind. I den kan der igen indlejres nye menudele.


<ul id="cssmenu">
    <li>  ....link....  </li>
    <li>  ....link....  </li>
    <li>.... overskrift for den indlejrede menu ....

        <ul>
            <li>  ....link....  </li>
            <li>  ....link....  </li>
            <li>  ....link....  </li>
            <li>  ....link....  </li>
            <li>  ....link....  </li>
        </ul>

    </li>
    <li>  ....link....  </li>
    <li>  ....link....  </li>
</ul>


Der kan være lige så mange "knæk" det skal være både under hinanden i en liste og som i antal niveauer. Det kan være hensigtsmæssigt at indsætte tekster / holdepunkter ved niveaubrud ned igennem menuen.


Listrstrukturen er ikke påvirket af om det første niveau i menuen skal vises horisontalt eller vertikalt - eller om undermenuerne skal åbne op nedad uden nogen sidelæns forskydning.

.





















x
x