Listy i menu

CSS

list-style-type

Wartości: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha i none.

list-style-image

list-style-image: url('punkt.png');

list-style-position

Wartości: inside i outside.

list-style

list-style: inside url('punkt.png');

Punktor utworzony z CSS

    li {
    position: relative;
    list-style-type: none;
    }

    li::before {
    content: "";
    position: absolute;
    height: 10px; width: 10px;
    left: 12px; top: 12px;
    border-radius: 5px 0 5px 0;
    background-color: #d6e636;
    box-shadow: 1px 1px 2px #888;
    }
    

Rozwijane menu z własnością zanikania

    nav.menu li ul {
    opacity: 0;
    visibility: hidden;
    width: 12em;
    left: 0;
    top: 100%;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    -ms-transition: 1s all;
    -o-transition: 1s all;
    transition: 1s all;
    }

    nav.menu li:hover > ul {
    opacity: 1;
    visibility: hidden;
    }

    nav.menu li li {
    float: none;
    }

    /* Dla przeglądarek które nie obsługują przejść w CSS */
    .no-csstransitions nav.menu li ul {
    visibility: visible;
    opacity: 1;
    display: none;
    }

    .no-csstransitions nav.menu li:hover > ul { display: block;}
    

Wyświetlanie rozwijanego menu na urządzeniach dotykowych przy pomocy Modernizr:

    .touch nav.menu li ul {
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    transition: 1s opacity;
    }
    

Linki

Listamatic http://css.maxdesign.com.au/listamatic/

Strona, na której zobrazowane jest różnorodne stylowanie list w CSS.