Rambler's Top100

Создание меню для сайта

Создание левого меню

Для этого меню, создайте новый файл с именем menu.css. Выделите и скопируйте весь код Здесь и вставте в ваш созданный файл menu.css.

Затем, файл menu.css подключим к html странице, между тегами <head> и </head> вставляем <LINK href="menu.css" TYPE="text/css" rel="stylesheet"> (выделено синим цветом)

Выделите и скопируйте код между открывающим тегом <div id="left"> и закрыващим </div> (между подсвеченными голубым цветом) и вставте его в то же место в своем файле html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
<LINK href="menu.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="top_menu">

     <div id="top_lnk">
<ul id="navCircle">
<li><a class="active" href="index.html"><img src="images/kov.gif" border=0>Главная</a></li>
<li><a href="Products.html"><img src="images/kov.gif" border=0>Ссылка_1</a></li>
<li><a href="Support.html"><img src="images/kov.gif" border=0>Ссылка_2</a></li>
<li><a href="Order.html"><img src="images/kov.gif" border=0>Ссылка 3</a></li>
<li><a href="News.html"><img src="images/kov.gif" border=0>Ссылка_4</a></li>
</ul>
     </div>

</div>

<div id="left">

<ul id="nav">
        <li><a href="index.html">Главная</a></li>
        <li><a href="#">Пункт меню 2</a></li>
        <li><a href="#">Пункт меню 3 </a></li>

        <li><a href="#">Пункт меню 4 </a>
<ul class="subs">
<li><a href="#">Подпункт меню</a></li>
<li><a href="#">Подпункт меню 2</a></li>
</ul>
</li>
       <li><a href="denwer_1.html">Пункт меню 5</a></li>
       <li><a href="#">Пункт меню 6</a></li>
       <li><a href="#">Пункт меню 7</a></li>
       <li><a href="#">Пункт меню 8</a></li>
       <li><a href="#">Пункт меню 8</a></li>
       <li><a href="#">Пункт меню 10</a></li>
       <li><a href="#">Пункт меню 11</a></li>
       <li><a href="#">Пункт меню 12</a></li>
</ul>

</div>

<div id="right"></div>

<div id="content"></div>

<div id="clear"></div>

<div id="footer"></div>

</div>

 

</body>
</html>

Сейчас наша html страница сайта выглядит ТАК

В этом меню любой пункт можно сделать с подпунктами, то есть раскрывающимся, посмотрите на примере пункта меню 4, например чтобы сделать раскрывающим пункт меню 3, перед закрывающим тегом </li> вставляете код выделенный голубым цветом, подпунктов вставляете столько сколько вам нужно.

        <li><a href="#">Пункт меню 4</a>

            <ul class="subs">
                <li><a href="#">Подпункт меню</a></li>
                <li><a href="#">Подпункт меню 2</a></li>
            </ul>

        </li>

И завершение построения каркаса на следующей странице, нажмите кнопку 6

 

Новости СМИ2
Rambler's Top100 Яндекс цитирования