Repozytorium Web Developera

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.