HTML [CSS][Урок] Создаем меню для сайта с помощью CSS.

Ruxxay · 6 Янв 2013

Здравствуйте, это мой второй урок, и в нем я покажу как сделать красивое меню.
При наведении будет изменяться цвет элемента меню.

Скриншот:

Начнем.
Создадим 2 файла.

index.html - файл где собственно будет наше меню.
style.css - а этот файл отвечает за оформление нашего меню.

Я не знаю каким хостингом вы пользуетесь, но покидайте его если там не поддерживается php5, html5,css3.

Начнем.
Создаем файл index.html и вставляем в него вот такой код:

HTML:

<!DOCTYPE html>
<HTML>
    <head>
        <title>Создание простого меню на CSS | Pawno-Info</title>
        <link href="menu.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id='cssmenu'><!--Меню -->
            <ul>
                <li class="active">
                    <a href="#">
                        <span>
                            Главная
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Форум
                        </span>
                    </a>
                </li>
                <li class="has-sub">
                    <a href='#'>
                        <span>
                            Мониторинг
                        </span>
                    </a>
                    <ul>
                        <li><a href="#"><span>Игроки онлайн</span></a></li>
                        <li><a href="#"><span>Лидеры организаций</span></a></li>
                        <li><a href="#"><span>Список забаненых</span></a></li>
                        <li><a href="#"><span>Администрация</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Донат</span></a></li>
                <li><a href="#"><span>Новости</span></a></li>
                <li><a href="#"><span>Скачать SA:MP</span></a></li>
            </ul>
        </div>
    </body>
</HTML>

Это меню строиться на списках. Будет так же 2 выезжающих меню, которые при наведении будут "выходить" из родителя.
Не забудьте, что вместо # надо прописать свою ссылку.

Теперь приступим к стилю ( style.css ).
В этот файл вставим следующий код

HTML:

#cssmenu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
    box-shadow: 0 0 10px #000000;
	}
#cssmenu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
#cssmenu li{
	float:left;
	padding:0px;
	}
#cssmenu li a{
	background:#333333 url('images/seperator.gif') bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
	}
#cssmenu li a:hover, #cssmenu ul li:hover a{
	background: #ff3333 url('images/hover.gif') bottom center no-repeat;
	color:#FFFFFF;
	text-decoration:none;
	}
#cssmenu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	/*top:1em;
	/*left:0;*/
	}
#cssmenu li:hover ul{
	display:block;
	
	}
#cssmenu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}
#cssmenu li:hover li a{
	background:none;
	
	}
#cssmenu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
    background: #ff3333 url('images/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	}
#cssmenu p{
	clear:left;
	}

Вот собственно все...

Скачать исходник:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

(Пароль: pawno-info)
Пример:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Автор урока: Я - Илья | Ruxxay

Переход в группу "Пользователь"

HTML [CSS][Урок] Создаем меню для сайта с помощью CSS.

Ruxxay

Начинающий