CyberForum.ru - Форум программистов и сисадминов
Вернуться   Форум программистов и сисадминов CyberForum.ru > Форум web-программистов > Форум HTML, CSS

Ответ Создать новую тему
 
Старый 04.02.2012, 23:00   #1
TOOX
Новичок
 
Регистрация: 28.06.2009
Сообщений: 45
Репутация: 4 (4)
По умолчанию Переделать вертикальное меню в горизонтальное

Здравствуйте!
Помогите пожалуйста сделать из данного вертикального меню горизонтальное.
Код HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Menu</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">
    startList = function() {
      if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i=0; i<navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                              this.className+=" over";
                        }
                        node.onmouseout=function() {
                              this.className=this.className.replace(" over", "");
                        }
                  }
            }
      }
    }
    window.onload=startList;
    </script>
 
</head>
 
<body>
    <div id="left-menu">
        <ul id="nav">
            <li><a href="#">01</a></li>
            <li><a href="#">02</a>
                <ul>
                    <li><a href="#">02_1</a></li>
                    <li><a href="#">02_2</a></li>
                </ul>
            </li>
            <li><a href="#">03</a>
                <ul>
                    <li><a href="#">03_1</a></li>
                    <li><a href="#">03_2</a></li>
                    <li><a href="#">03_3</a></li>
                </ul>
            </li>
            <li><a href="#">04</a></li>
        </ul>
    </div>
 
</body>
</html>
 
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#left-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 228px;
    border-bottom: 1px solid #ddd;
}
#left-menu ul li {
    position: relative;
}
#left-menu li ul {
    position: absolute;
    left: 227px;
    top: 0;
    display: none;
}
#left-menu ul li a {
    display: block;
    text-decoration: none;
    color: #360036;
    background: #fff;
    padding:5px 5px 5px 15px;
    border: 1px solid #ddd;
    border-bottom: 0;
}
#left-menu ul li a:hover {
    /*color: #360036;*/
    background: #ddd;
}
#left-menu li:hover ul, li.over ul { 
    display: block; 
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
Спасибо за внимание!
Вложения
Тип файла: rar menu.rar (2.1 Кб, 15 просмотров)
TOOX вне форума
Другие темы раздела
что такое псевод класс и псевдо элемент? html
читал спецификацию w3org и никак не пойму псевод классы и псевдо элементы являются селекторами или нет? например :active :link :visited и тд в спецификации пишут, что это псевдо класс потом приводят таблицу со всеми селекторами и там уже написано, что это селекторы :active :link :visited,.... что такое псевод класс и псевдо элемент?
Обучение качественной верстки html
Как быстро научиться верстать макеты?. Обучение качественной верстки
Старый 08.02.2012, 23:00   #2
Denis St.
Новичок
 
Аватар для Denis St.
 
Регистрация: 07.11.2011
Адрес: Ставрополь
Сообщений: 75
Репутация: 42 (23)
По умолчанию Re: Переделать вертикальное меню в горизонтальное

Вот, держи
Вложения
Тип файла: rar menu.rar (1.1 Кб, 13 просмотров)
Denis St. вне форума
Ответ Создать новую тему

Похожие темы
Тема Автор
Pascal (Паскаль) Необходимо создать меню цифровое вертикальное с 'исчезающим" основным меню.
Необходимо создать меню цифровое вертикальное с 'исчезающим" основным меню.
moren
PascalABC изменить вертикальное меню на горизонтальное
Program nm; Uses CRT; Var spisok: array of string; kod, kod1: char; n, i, p: byte; Procedure findd (n:byte); {âûâîä èíôîðìàöèè ïî âûáðàííîìó ïóíêòó ìåíþ} begin Textcolor (red); Textbackground (white); window (20,1,50,20); Clrscr; case n of {àíàëèç íîìåðà...
allenka
JavaScript Вертикальное меню!
Всем привет! сразу переду к вопросу (срочно просто надо) 1)Как сделать, чтобы background в меню оставлся активным после выбора меню?т.е. при наведении background виднеется,а после того как выбираешь меню оно пропадает и остается пустым. 2)Можно ли через CSS или JS сделать,чтобы меню плавно...
Панчо
HTML, CSS вертикальное меню.тег LI
как сверстать такое меню делаю так <div id="header"> <ol id="headermenu"> <li ><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> </ol>
cpentyc
Web-дизайн Вертикальное меню
Хочу сделать меню как на сайте http://tehnotrade.com.ua/navigps/...
lanzelot
Опции темы

Текущее время: 16:42. Часовой пояс GMT +4.

Компьютерный форум программистов и сисадминов
Powered by vBulletin® Version 3.8.7 PL2
Copyright ©2000 - 2012, vBulletin Solutions, Inc.
Рейтинг@Mail.ru