Няколко готини менюта

Автор: unknown

В този урок ще видите как може да си направите бутон или меню с помоща на CSS.Ще започнем от по-прости.
И така..
Да започваме.
1.

#example1vert {
font-family : "Times New Roman", serif;
font-size : 10px;
}

#example1vert ul {
background-color : white;
width : 96px;
list-style-type : none;
border : 1px solid black;
padding : 0;
margin : 0;
}

#example1vert ul li {
border-bottom : 1px solid black;
}

#example1vert ul li a:visited {
color : purple;
}

#example1vert ul li a:link {
color : blue;
}

#example1vert ul li a:hover {
color : red;
}

Това е вертикално меню.Представлява линкове ,с ефекти на текста,един под друг отделени с рамка.

2

#example1hor {
font-family : "Times New Roman", serif;
font-size : 10px;
text-align : center;
}


#example1hor ul {
background-color : white;
list-style-type : none;
padding : 0;
margin : 0;
width : 384px;
}


#example1hor ul li {
display : inline;
}


#example1hor ul li a {
margin-left : 0;
margin-right : 0;
border : 1px solid black;
}


#example1hor ul li a:visited {
color : purple;
}


#example1hor ul li a:link {
color : blue;
}


#example1hor ul li a:hover {
color : red;
}

Това меню е като първото ,но поставено хоризонтално.

3

#example2vert {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2vert ul {
background-color : #333366;
width : 118px;
list-style-type : none;
padding : 0;
margin : 0;
}

#example2vert ul li {
color : white;
}

#example2vert ul li a:link, #example2vert ul li a:visited {
color : #9999FF;
text-decoration : none;
padding : 3px;
display : block;
}

#example2vert ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

Стилно цветно вертикално меню с готин mouseover ефект.

4

#example2hor {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2hor ul {
background-color : #333366;
width : 512px;
list-style-type : none;
padding : 3px;
margin : 0;
}

#example2hor ul li {
color : white;
display : inline;
}

#example2hor ul li a:link, #example2hor ul li a:visited {
color : #9999FF;
text-decoration : none;
padding-left : 3px;
padding-right : 3px;
}

#example2hor ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

Като 3-тото ,но хоризонтално

5

#example3vert {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example3vert ul {
background-color : #FFFFCC;
width : 96px;
list-style-type : none;
margin-left : 0;
padding-left : 0;
border : 4px ridge #FFCC99;
}

#example3vert ul li {
color : black;
}

#example3vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

Вертикално красиво меню.Може да ползвате като отделни бутони,има добър ефект на рамките.

6

#example3hor {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : center;
}

#example3hor ul {
background-color : #FFFFCC;
width : 576px;
padding : 6px;
list-style-type : none;
border : 4px ridge #FFCC99;
}

#example3hor ul li {
display : inline;
color : black;
}

#example3hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

Като 5-тото но вертикално.

7

#example4vert {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4vert ul {
width : 96px;
list-style-type : none;
margin-left : 0;
padding-left : 0;
}

#example4vert ul li {
color : black;
}

#example4vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
}

#example4vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Вертикално меню,бутона се показва когато минете с мишката върху него.

8

#example4hor {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4hor ul {
width : 576px;
list-style-type : none;
}

#example4hor ul li {
display : inline;
color : black;
}

#example4hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
}

#example4hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Като 7,но хоризонтално

За да добавите менюто си в сайта запазете кода в css файл(например menu.css).Направете html файл и напишете:

<link rel="stylesheet" href="menu.css" type="text/css">
<div id="example1vert">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

Урока е преведен от мен специално за Web-Tourist.net