Simplo (demo)

Blissful Blog (demo)

The Ideal Website (demo)

Un.complicated Theme (demo)

Clear (demo)

Smooth (demo)

Simple Organization (demo)

Neutra (demo)

Modernist (demo)

WP-Notes (demo)

Manifest (demo)

Functionalism (demo)

Vostok (demo)

Mini (demo)

SimpleFolio (demo)

Chcę wam zaprezentować trzy narzędzia, dzięki którym zoptymalizujemy działanie strony internetowej poprzez zmniejszenie rozmiarów obrazków, kodu CSS i JavaScript.

1. CSSDRIVE.COM

Kompresja plików CSS. Mamy do wybory trzy poziomy kompresji (Light, Normal, Super Compact) i oprócz tego opcje dotyczące komentarzy w kodzie. Jak to działa? Po prostu wklejamy swój kod CSS, wybieramy poziom kompresji i klikamy ‘Compress’. W rezultacie otrzymujemy skompresowany kod oraz krótkie info o tym ile udało nam się zaoszczędzić.

2. JSCOMPRESS.COM

Następnym narzędziem jest kompresor plików JS. Działanie jest dokładnie takie same jak to wyżej. Wklejamy kod (możemy też uploadować z dysku), klikamy ‘Compress Javascript’ i nadpisujemy zawartość naszego pliku JS. Mamy do wyboru opcję ‘Minify’ oraz ‘Packer’ (http://dean.edwards.name/packer/).

3. SMUSHIT.COM

Moim zdaniem najciekawsze z całej trójki. Tym narzędziem bezstratnie zmniejszamy rozmiary naszych grafik, jakość obrazów i treść nie ulega zmianie. Jak się tym bawić? Bardzo prosto. Wgrywamy zdjęcia z dysku (możemy zaznaczyć więcej niż jedno za jednym razem) i w rezultacie otrzymujemy paczkę zip, wewnątrz której są nasze obrazy. Zachowują one oryginalne nazwy więc jedyne co musimy zrobić to podmiana grafik na te z wygenerowanej paczki i możemy się cieszyć szybszym ładowaniem strony. Podobnie jak w cssdrive dostajemy info o tym o ile zmniejszył się rozmiar pliku.

Mam nadzieję, że ktoś uzna za przydatne to co napisałem. Z chęcią poznam inne narzędzia, z których warto korzystać tak więc – zapraszam do dyskusji.

Użytkowników, którzy mają wyłączony JavaScript jest niewielu, ale jednak tacy istnieją (gdzieś.. pododbno). Nie jest to jedyny powód, dla którego warto zbudować menu bez pomocy JS. Dochodzi jeszcze kwestia wygody w edycji, prostota wykonania, i… sam najlepiej wiesz dlaczego chcesz zrobić nawigację nie używając JavaScriptu. Dość ględzenia, zaczynajmy.

KOD ŹRÓDŁOWY || DEMO

Najpierw tworzymy strukturę menu w HTML’u. Oczywiście wykorzystujemy do tego listę nieuporządkowaną (unordered list, ul)

</p>
<ul id="”menu”">
<li><a href="”#”">Strona Główna</a></li>
<li><a href="”#”">Portfolio</a>
<ul>
<li><a href="”#”">Grafika</a></li>
<li><a href="”#”">Webdesign</a></li>
</ul>
</li>
<li><a href="”#”">O mnie</a></li>
<li><a href="”#”">Oferta</a>
<ul>
<li><a href="”#”">Cennik</a></li>
<li><a href="”#”">Terminy</a></li>
</ul>
</li>
<li><a href="”#”">Kontakt</a></li>
</ul>
<p>

Bez ostylowania wygląda to dokładnie tak:

Następną, ostatnią i najbardziej skomplikowaną rzeczą jest ostylowanie naszego menu. Oczywiście w każdej chwili możemy wrócić do HTML’a, dopisać kolejne elementy i mieć pewność, że wszystko zadziała jak należy.

body {
background: #606060;
font-family: Arial, verdana;
}
ul {
list-style:none; /* usuwamy wypunktowanie listy */
}
#menu  {
margin: 0;
padding: 0; /* usuwamy wszelkie odstępy */
}
#menu li a {
border-left: 1px #2a2a2a solid;
border-right: 1px #585a5b solid;
border-bottom: 1px #585a5b solid;
border-top: 1px #2a2a2a solid;
color: #ffffff;
text-decoration:none;
padding:15px 15px;
background: #333333;
}
#menu li, #menu li a {
float:left;
}
#menu li {
position:relative; /* względem tego będziemy pozycjonowali podmenu */
}
#menu li a:hover {
background: #252627;
}
#menu li ul { /* tutaj odnosimy się do podmenu*/
display:none;
position:absolute;
top:100%; /* wysuwające się podmenu przesuwamy w dół o długość menu-matki */
padding:0;
margin:0; /*usuwamy wszelkie odstępy podmenu*/
}
#menu li:hover > ul { /* selektor > oznacza, że instrukcja obejmuje każdy tag ul wewnątrz #menu li */
display:block;
}
#menu li ul li, #menu li ul li a {
float: none;
}
#menu li ul li a {
width: 100px; /* szerokosc wysuwajacego sie podmenu*/
display: block;
}

To wszystko, mam nadzieję, że dzięki komentarzom w kodzie css poradzisz sobie z dopasowaniem menu do własnych potrzeb.

KOD ŹRÓDŁOWY || DEMO