[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Общая информация » Вопросы по uCoz » Как быстро сделать простое горизонтальное меню для сайта?
Как быстро сделать простое горизонтальное меню для сайта?
RedStarДата: Пятница, 15.08.2014, 19:30 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Пример 1. Базовое горизонтальное CSS меню для сайта
или как сделать простейшее CSS меню из HTML списка




HTML код меню:

Код
<title>Создание базового горизонтального меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-1">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>


CSS код меню:

Код
ul.css-menu-1 {
list-style: none
}

ul.css-menu-1 li {
display: inline
}

ul.css-menu-1 li a {
font-family: Tahoma, Geneva, sans-serif;   
text-decoration: none;
background: #5c6cb7;
font-weight: bold;
color: #ffaa00;   
padding: 6px 10px 6px 10px
}

ul.css-menu-1 li a:hover {
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #364d95;
color: #ff9900   
}

ul.css-menu-1 li a.selected {
background: #364e95
}
 
RedStarДата: Пятница, 15.08.2014, 19:36 | Сообщение # 2
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Пример 2. Создание меню для сайта CSS методами

или как сделать CSS меню без использования изображения





HTML код меню:


Код
<title>Создание меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>


CSS код меню:

Код
ul.css-menu-2 {
list-style: none;
border-bottom: 1px #888899 solid;
padding-bottom: 10px
}

ul.css-menu-2 li {
display: inline;
margin-right: 5px
}

ul.css-menu-2 li a {
color: #888899;
text-decoration: none;
background: #f7f7f9;
border: 1px #bbbbcc solid;
border-bottom: none;
padding: 10px 14px
}

ul.css-menu-2 li a:hover {
padding: 14px 14px 10px 14px
}

ul.css-menu-2 li a.selected {
color: #555566;
background: #ffffff;
border: 1px #888899 solid;
border-bottom: 1px #ffffff solid;
padding: 14px 14px 10px 14px
}
 
RedStarДата: Пятница, 15.08.2014, 19:42 | Сообщение # 3
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Пример 3. Красивое горизонтальное CSS меню для сайта

или как сделать CSS меню для сайта без использования изображения





HTML код меню:

Код
<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">О нашем проекте</span>
</a></li>
<li><a href="#">
<span class="text-top">Справочник</span>
<span class="text-bottom">CSS справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS уроки</span>
<span class="text-bottom">Для начинающих</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS меню</span>
<span class="text-bottom">Коллекция CSS меню</span>
</a></li>
</ul>
</div>


CSS код меню:

Код
#css-menu ul {
list-style: none;
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
line-height: 1.4em;
border:2px solid #000000;
border-left: 1px solid #000000;
float: left;
padding: 0;
margin: 12px 0 25px 24px
}

#css-menu ul li {
float: left
}

#css-menu ul li a {
display: block;
text-decoration: none;
background-color: #595959;
padding: 5px 10px 0 10px;
color: #fefefe;
width: 120px;
border-right: 1px solid #797979;
border-left: 1px solid #191919
}

#css-menu ul li a span {
display: block
}

#css-menu ul li a span.text-top {
border-bottom: 1px solid #595959
}

#css-menu ul li a:hover span.text-top {
border-bottom: 1px dashed #fefefe;
color: #ffddbb
}

#css-menu ul li a span.text-bottom {
visibility: hidden;
font-size: 11px;
text-align: right
}

#css-menu ul li a:hover span.text-bottom {
visibility: visible  
}
 
RedStarДата: Пятница, 15.08.2014, 19:49 | Сообщение # 4
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Пример 4. Горизонтальное меню для сайта CSS методами

или как сделать CSS меню для сайта без использования изображения




HTML код меню:

Код
<title>Создание горизонтального CSS меню без изображения</title>
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>


CSS код меню:

Код
ul.css-menu-3 {
list-style: none;
border-bottom: 5px solid #bb0000;
border-top: 1px solid #114477;
padding: 11px;
background: #336699
}

ul.css-menu-3 li {
display: inline
}

ul.css-menu-3 li a {
color: #fefefe;
text-decoration: none;
background: #225588;
border: 1px solid #225588;
border-bottom: 1px solid #114477;  
margin: 0;  
padding: 10px 14px 10px 14px  
}

ul.css-menu-3 li a:hover {border-left: 1px solid #114477; border-right: 1px solid #114477}

ul.css-menu-3 li a.selected {
color: #fefefe;
background: #bb0000;
border: 1px #cc0000 solid;
border-bottom: 1px solid #bb0000;
border-left: 1px solid #770000;
padding: 10px 14px 10px 14px
}
 
Форум » Общая информация » Вопросы по uCoz » Как быстро сделать простое горизонтальное меню для сайта?
Страница 1 из 11
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz