Выпадающее подменю

@pvst · Регистрация: 27.04.2013

Студворк — интернет-сервис помощи студентам

например у меня есть 4 раздели
новости
статти
хобби
отдих
в етих разделах должни бить еще пункти. как сделать щоби при нажатии на ети раздели визивались пункти
заранее спасиба!

@Uc4o · 08.05.2013, 21:30

Тебе рядом надо сделать с каждым пунктом сделать блок и сделать их невидимыми при помощи CSS. Затем с помощью Java-Script при наведении на каждый пункт открывать нужный слой. Я тебе ссылку на сайт могу кинуть, где про это подробно написано, но здесь ссылки вроде как запрещены. Если конечно я правильно понял то, что ты хочешь получить.

@НС · 08.05.2013, 21:59

pvst, список [Ul][Li]

Добавлено через 2 минуты
Uc4o,

Сообщение от Uc4o

Тебе рядом надо сделать с каждым пунктом сделать блок и сделать их невидимыми при помощи CSS. Затем с помощью Java-Script при наведении на каждый пункт открывать нужный слой. Я тебе ссылку на сайт могу кинуть, где про это подробно написано, но здесь ссылки вроде как запрещены. Если конечно я правильно понял то, что ты хочешь получить.

Зачем все так усложнять?

Добавлено через 5 минут
pvst,

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
    <li>1</li>
        <ul>
            <li>1.1</li>
        </ul>
    <li>2</li>
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    <li>3</li>
        <ul>
            <li>3.1</li>
            <li>3.2</li>
            <li>3.3</li>
        </ul>
  </ul>

Даже сверстать уже успел

Добавлено через 7 минут

можешь уже копировать и вставлять в нужные места...
Сам Html

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="nav">
  <li><a href="#">Новости</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="return false;">Статьи</a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="return false;">Others</a></li>
</ul>

Сам CSS

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#nav,#nav li ul{
  margin:0px;
  padding:0px;
  list-style:none;
}
#nav > li{
  float:left;
  width:120px;
}
#nav li ul{
  display:none;
  position:absolute;
  z-index:100;
  width:120px;
}
#nav li:hover ul{display:block}

@Alexander519151 · 08.05.2013, 22:08

Всем привет.
Не забудьте про оформление в css.
если интересно, вот только, что сделал и проверил:
можете попробовать менять цвет для своего дизайна,
Я сделал такой. Получился очень интересный переход при наведении (плавный)
При изменении цвета бывают (иногда) несовпадения и портится эффект перехода цвета по градиенту.
код html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav>
    <ul class="nav">
        <li><a href="/site_info1/index.html" title="НА ГЛАВНУЮ">НА ГЛАВНУЮ</a></li>
        <li><a href="#" title="пункт меню 1">пункт меню 1</a>
            <ul class="subs">
                <li><a href="/site_info1/1_1.html" title="пункт меню 1.1">пункт меню 1.1</a></li>
                <li><a href="/site_info1/1_2.html" title="пункт меню 1.2">пункт меню 1.2</a></li>
                <li><a href="/site_info1/1_3.html" title="пункт меню 1.3">пункт меню 1.3</a></li>
            </ul>
        </li>
        <li><a href="#" title="пункт меню 2">пункт меню 2</a>
            <ul class="subs">
                <li><a href="/site_info1/2_1.html" title="пункт меню 2.1">пункт меню 2.1</a></li>
                <li><a href="/site_info1/2_2.html" title="пункт меню 2.2">пункт меню 2.2</a></li>
            </ul>
        </li>
        <li><a href="/site_info1/3.html" title="пункт меню 3">пункт меню 3</a></li>
    </ul>
</nav>

вот код css:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
.nav,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
 
.nav {
    position:relative;
}
 
.nav ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}
 
.nav li {
    float:left;
    position:relative;
}
 
.nav li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    
    float:left;
    padding: .8em 1.5em;
    text-decoration: none;
    color: #fff;
    font: bold 1.1em/1 Verdana;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #666 #444 #222 #000;
    background: #555;
    background: -moz-linear-gradient(#555, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#000));
    background: -webkit-linear-gradient(#555, #000);
    background: -o-linear-gradient(#555, #000);
    background: -ms-linear-gradient(#555, #000);
    background: linear-gradient(#555, #000);
    
    display:block;
    font-size:12px;
    padding: 16px;
    text-decoration:none;
    transition:0.5s;
}
 
.nav li:hover > a {
    outline: 0;
    color: #00ff00;
    background: #000;
    background: -moz-linear-gradient(#222, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
    background: -webkit-linear-gradient(#222, #000);
    background: -o-linear-gradient(#222, #000);
    background: -ms-linear-gradient(#222, #000);
    background: linear-gradient(#222, #000);
}
 
.nav li:hover ul.subs {
    height:auto;
    width: 200px;
}
 
.nav ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
}
 
.nav li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
}
 
.nav li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}
 
.nav ul li a {
    background:#000;
    color:#fff;
 
    line-height:1px;
    
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}
 
.nav li:hover ul li a {
    padding: 20px;
}
 
.nav ul li a:hover {
    background:#00ff00;
    color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}
 
=========================
 
.nav ul li a:active {
    position: relative;
    top: 1px;
/*    -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;*/
}
.nav ul li a:visited {
    color:#008000;
    }
 
nav ul li a:active {
    position: relative;
    top: 1px;
/*    -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;*/
}
nav ul li a:visited {
    color:#008000;
    }
 
nav li:first-child a {
    border-left: 0;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;            
}
 
nav li:last-child a {
    border-right: 0;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;            
}

С Уважением Александр.

@pvst · 08.05.2013, 22:39 **[ТС]**

но я хачу чтоби например 3 откривал подпункти при нажатие па нем

@Alexander519151 · 09.05.2013, 02:49

Если именно при нажатии, то добавьте вот этот скрипт

JavaScript
1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
    $('ul.menu_body').slideToggle('medium');
    });
});
</script>

переопределите имена в соответствии с Вашими именами классов. Что бы третий пункт был с другим именем класса и совпадал с указанным в скрипте.
Вот вкратце.

С Уважением Александр.

@pvst · 09.05.2013, 16:55 **[ТС]**

всем бальшое спасиба!

@Alexander519151 · 09.05.2013, 17:13

Будут вопросы - задавайте. Будем рады помочь.

С Уважением Александр.

@НС · 09.05.2013, 19:33

Alexander519151,

Сообщение от Alexander519151

С Уважением Александр.

ты сам вбиваешь ето? или подпись?

@Alexander519151 · 09.05.2013, 21:39

С Уважением Александр.

ты сам вбиваешь ето? или подпись?

Сам набираю, каждый раз.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@pvst 0 / 0 / 1 Регистрация: 27.04.2013 Сообщений: 58

	Выпадающее подменю 08.05.2013, 14:53. Показов 4559. Ответов 9 Метки нет (Все метки) например у меня есть 4 раздели новости статти хобби отдих в етих разделах должни бить еще пункти. как сделать щоби при нажатии на ети раздели визивались пункти заранее спасиба! 0

@Uc4o 0 / 0 / 1 Регистрация: 10.03.2013 Сообщений: 27
	08.05.2013, 21:30
	Тебе рядом надо сделать с каждым пунктом сделать блок и сделать их невидимыми при помощи CSS. Затем с помощью Java-Script при наведении на каждый пункт открывать нужный слой. Я тебе ссылку на сайт могу кинуть, где про это подробно написано, но здесь ссылки вроде как запрещены. Если конечно я правильно понял то, что ты хочешь получить. 0

@pvst 0 / 0 / 1 Регистрация: 27.04.2013 Сообщений: 58
	08.05.2013, 22:39 [ТС]
	но я хачу чтоби например 3 откривал подпункти при нажатие па нем 0

@pvst 0 / 0 / 1 Регистрация: 27.04.2013 Сообщений: 58
	09.05.2013, 16:55 [ТС]
	всем бальшое спасиба! 0

@Alexander519151 461 / 461 / 6 Регистрация: 08.05.2013 Сообщений: 242
	09.05.2013, 17:13
	Будут вопросы - задавайте. Будем рады помочь. С Уважением Александр. 3