• CSS menu • - SEO przyjazne

CSS menu, czyli menu oparte na kaskadowym arkuszu stylów. Takie menu jest przyjazne przeglądarkom z powodu jej prostej struktury, jest to lepsze rozwiązanie niż zastosowanie menu w javascript. Na początku budowanie własnej strony jedynymi linkami, które będą prowadzić do twoich artykułów bądą linki wewnętrzne. Trzeba zrobić je tak, aby jak najprościej roboty google mogły przechodzić do kolejnych stron.

CSS menu - poziome, rozwijane

Menu poziome jest zbudowane tak, aby rozwijany element menu nachodził na zawartość pod nim.

Podgląd:

HTML:

<li>
<a href="#" >Menu 2</a>
<ul>
<li>
<a href="#" >Menu 2.1</a>
</li>
<li>
<a href="#" >Menu 2.2</a>
</li>
<li>
<a href="#" >Menu 2.3</a>
</li>
</ul>
</li>
<li>
<a href="#" >Menu 3</a>
<ul>
<li>
<a href="#" >Menu 3.1</a>
</li>
<li>
<a href="#" >Menu 3.2</a>
</li>
</ul>
</li>
</ul>

Najpierw trzeba pod linkować CSS do HTML. Umieścić między link do css: <link type="text/css" rel="stylesheet" href="style.css" /> . Plik CSS można stworzyć w notatniku wystarczy przekopiować instrukcje i zapisać plik, jako style.css nie zapomnij o zmianie typu zapisu z txt na all.

CSS:

.menu{
list-style:none outside none;
}
.menu li{
float:left;
list-style:none outside none;
text-align:center;
}
.menu li a{
text-decoration:none;
display:block;
background:#CCC;
width:150px;
color:#FFF;
}
.menu li a:hover{
background:#999;
}
.menu li ul{
position:absolute;
z-index:100;
height:auto;
overflow:hidden;
margin:0;
padding:0;
display:none;
}
.menu li ul li{
float:none;
}
.menu li:hover ul{
display:block;
}

CSS menu - pionowe, rozwijane

Menu pionowe jest zbudowane tak, aby rozwijany element menu nachodził na zawartość pod nim.

Podgląd:

HTML:

<li>
<a href="#" >Menu 2</a>
<ul>
<li>
<a href="#" >Menu 2.1</a>
</li>
<li>
<a href="#" >Menu 2.2</a>
</li>
<li>
<a href="#" >Menu 2.3</a>
</li>
</ul>
</li>
<li>
<a href="#" >Menu 3</a>
<ul>
<li>
<a href="#" >Menu 3.1</a>
</li>
<li>
<a href="#" >Menu 3.2</a>
</li>
</ul>
</li>
</ul>

Najpierw trzeba pod linkować CSS do HTML. Umieścić między link do css: <link type="text/css" rel="stylesheet" href="style.css" /> . Plik CSS można stworzyć w notatniku wystarczy przekopiować instrukcje i zapisać plik, jako style.css nie zapomnij o zmianie typu zapisu z txt na all.

CSS:

.menu{
list-style:none outside none;
width:150px;
float:left;
margin:0;
padding:0;
}
.menu li{
list-style:none outside none;
text-align:center;
}
.menu li a{
text-decoration:none;
display:block;
background:#CCC;
width:150px;
color:#FFF;
}
.menu li a:hover{
background:#999;
}
.menu li ul{
display:none;
height:auto;
margin:-20px 0 0 150px;
overflow:hidden;
padding:0;
position:absolute;
z-index:100;
}
.menu li ul li{
float:none;
}
.menu li:hover ul{
display:block;
}