ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопрос по выпадающему горизонтальному меню
9 сообщений из 9, страница 1 из 1
Вопрос по выпадающему горизонтальному меню
    #39429023
ukugyul552465
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ukugyul552465
Гость
Добрый день.

Было меню - горизонтальное, выпадающее, но с привязкой по пикселям:
 
по пикселям


<style type="text/css">

* {
margin:0;
padding:0;
}
#nav {
font:17px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:200px;
margin-top:-10000px;
}
#nav li a {
width:200px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-199px;
margin-top:10000px;
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

</style>




<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>

<ul id="nav">
<li><a href="#">Обучение(уроки)</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Веб-технологии</a></li>
<li><a href="#">Информационная безопасность</a></li>
</ul>
</li>
<li><a href="#">Обзоры</a>
<ul>
<li><a href="#">Покупки(товары)</a></li>
<li><a href="#">Сервисы</a></li>
</ul>
</li>
<li><a href="#">Статьи</a>
<ul>
<li><a href="#">Компьютерная зона</a></li>
<li><a href="#">Мобильная зона</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Околонаука</a></li>
</ul>
</li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Партнёры</a></li>
</ul>



Переделал его на привязку по процентам, чтобы на больших экранах не было пустого места справа от меню.
Однако, теперь на экранах до 19" элементы подменю сами выезжают просто так.

 
по процентам


<style type="text/css">

* {
margin:0;
padding:0;
}
#nav {
font:17px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:20%;
margin-top:-10000px;
}
#nav li a {
width:200px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-19%;
margin-top:10000px;
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

</style>




<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>

<ul id="nav">
<li><a href="#">Обучение(уроки)</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Веб-технологии</a></li>
<li><a href="#">Информационная безопасность</a></li>
</ul>
</li>
<li><a href="#">Обзоры</a>
<ul>
<li><a href="#">Покупки(товары)</a></li>
<li><a href="#">Сервисы</a></li>
</ul>
</li>
<li><a href="#">Статьи</a>
<ul>
<li><a href="#">Компьютерная зона</a></li>
<li><a href="#">Мобильная зона</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Околонаука</a></li>
</ul>
</li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Партнёры</a></li>
</ul>

И не подскажите, как высоту привязать по процентам? Пробовал, однако при любых значениях получается узкая полоска, намного меньшая размера текста.


Сайт для примера:
 
сайт
https://aklbrw.000webhostapp.com/
...
Рейтинг: 0 / 0
29.03.2017, 10:59
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429024
ukugyul552465
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ukugyul552465
Гость
И не подскажите, как высоту привязать по процентам? Пробовал, однако при любых значениях получается узкая полоска, намного меньшая размера текста.
...
Рейтинг: 0 / 0
29.03.2017, 11:00
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429050
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ukugyul552465И не подскажите, как высоту привязать по процентам? Пробовал, однако при любых значениях получается узкая полоска, намного меньшая размера текста.
"Процентовка" элемента полностью зависит от размеров его родителя. Т.ч. проверяй родительский размер...
...
Рейтинг: 0 / 0
29.03.2017, 11:29
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429154
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
ukugyul552465,

если браузеры не старые, то попробуйте ещё через Flexbox
...
Рейтинг: 0 / 0
29.03.2017, 12:47
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429344
ukugyul552465
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ukugyul552465
Гость
Сделал на flex, однако не получается сделать выпадающий список.
И почему-то немного вкривь пошло.

 
код


<style type="text/css">

* {
margin:0;
padding:0;
}





.flex2{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0 15px;
}
.flex2 li {
display: flex;
border-left: 1px solid #247634;
border-right: 1px solid #57e974;
flex-basis: 20%;
flex-grow: 1;
justify-content: center;
}



.flex3{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0 15px;
}


.flex3 li {
display: flex;
border-left: 1px solid #247634;
border-right: 1px solid #57e974;
flex-basis: 20%;
flex-grow: 1;
justify-content: center;
}

.flex3 li a {
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
}




.flex3 a:hover, #content #nav li a:focus, #content li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
.flex3 li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}




.flex3 li ul li {
float:none;
margin:0;
width:auto;
}
.flex3 ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}






</style>






<nav role="navigation">
<ul class="flex2">
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>
</nav>

<nav role="navigation">
<ul class="flex2">
<li class="flex3"><a href="#">Обучение(уроки)</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Веб-технологии</a></li>
<li><a href="#">Информационная безопасность</a></li>
</ul>
</li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>
</nav>




 
сайт
https://aklbrw.000webhostapp.com
...
Рейтинг: 0 / 0
29.03.2017, 15:39
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429450
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
ukugyul552465,

код надо завернуть в тег [src] и отформатировать, чтобы легко читался. Или разместить на https://jsfiddle.net/

Из первого сообщения ukugyul552465... чтобы на больших экранах не было пустого места справа от менюя понял, что вроде всё ОК. А сделайте сайт просто по центру окна браузера. Это довольно популярное решение, и мучиться не надо   http://htmlbook.ru/samlayout/tipovye-makety
...
Рейтинг: 0 / 0
29.03.2017, 17:51
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429557
ukugyul552465
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ukugyul552465
Гость
 
код офрмленный
Код: 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.
<style type="text/css">

* {
margin:0;
padding:0;
}
#nav {
font:17px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:20%;
margin-top:-10000px;
}
#nav li a {
width:200px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-19%;
margin-top:10000px;
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

</style>




Код: 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.
<ul id="nav">
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>

<ul id="nav">
<li><a href="#">Обучение(уроки)</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Веб-технологии</a></li>
<li><a href="#">Информационная безопасность</a></li>
</ul>
</li>
<li><a href="#">Обзоры</a>
<ul>
<li><a href="#">Покупки(товары)</a></li>
<li><a href="#">Сервисы</a></li>
</ul>
</li>
<li><a href="#">Статьи</a>
<ul>
<li><a href="#">Компьютерная зона</a></li>
<li><a href="#">Мобильная зона</a></li>
<li><a href="#">Наука</a></li>
<li><a href="#">Околонаука</a></li>
</ul>
</li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Партнёры</a></li>
</ul>




Макет если по центру делать - пустое место справа и слева.
...
Рейтинг: 0 / 0
29.03.2017, 21:03
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429558
ukugyul552465
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ukugyul552465
Гость
ukugyul552465,

 
с flex

Код: 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.
<style type="text/css">

* {
margin:0;
padding:0;
}





.flex2{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0 15px;
}
.flex2 li {
display: flex;
border-left: 1px solid #247634;
border-right: 1px solid #57e974;
flex-basis: 20%;
flex-grow: 1;
justify-content: center;
}



.flex3{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0 15px;
}


.flex3 li {
display: flex;
border-left: 1px solid #247634;
border-right: 1px solid #57e974;
flex-basis: 20%;
flex-grow: 1;
justify-content: center;
}

.flex3 li a {
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
}




.flex3 a:hover, #content #nav li a:focus, #content li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
.flex3 li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}




.flex3 li ul li {
float:none;
margin:0;
width:auto;
}
.flex3 ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}


</style>



Код: 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.
<nav role="navigation">
<ul class="flex2">
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>
</nav>

<nav role="navigation">
<ul class="flex2">
<li class="flex3"><a href="#">Обучение(уроки)</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Веб-технологии</a></li>
<li><a href="#">Информационная безопасность</a></li>
</ul>
</li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Команда проекта</a></li>
<li><a href="#">Поддержать проект</a></li>
<li><a href="#">Обратная связь</a></li>
</ul>
</nav>


...
Рейтинг: 0 / 0
29.03.2017, 21:05
| Ответить | Цитировать | Написать  
Вопрос по выпадающему горизонтальному меню
    #39429680
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ukugyul552465 , глянул я на Опере твой вариант...

 
Код: 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.
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
* {
	margin:0;
	padding:0;
}
.flex2{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 0 15px;
}
.flex2 li {
	display: flex;
	border-left: 1px solid #247634;
	border-right: 1px solid #57e974;
	flex-basis: 20%;
	flex-grow: 1;
	justify-content: center;
}
.flex3{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: 0 15px;
}
.flex3 li {
	display: flex;
	border-left: 1px solid #247634;
	border-right: 1px solid #57e974;
	flex-basis: 20%;
	flex-grow: 1;
	justify-content: center;
}
.flex3 li a {
	text-decoration:none;
	text-align:center;
	color:#3A3732;
	position:relative;
	float:left;
}
.flex3 a:hover, 
#content #nav li a:focus, 
#content li a:active {
	background:#797466;
	margin-right:0;
	color:#fff;
}
.flex3 li ul {
	background:#A39E92;
	float:left;
	margin-top:-25px;
	padding-top:25px;
	margin-bottom:-10000px;
	list-style-type:none;
}
.flex3 li ul li {
	float:none;
	margin:0;
	width:auto;
}
.flex3 ul li a {
	float:none;
	display:block;
	margin:0;
	margin-right:-1px;
	background:#BFBCB5;
}

</style>
<script type='text/javascript'>
</script>
</head>
<body>
<nav role="navigation">
	<ul class="flex2">
		<li><a href="#">Главная</a></li>
		<li><a href="#">О сайте</a></li>
		<li><a href="#">Команда проекта</a></li>
		<li><a href="#">Поддержать проект</a></li>
		<li><a href="#">Обратная связь</a></li>
	</ul>
</nav>
<nav role="navigation">
	<ul class="flex2">
		<li class="flex3"><a href="#">Обучение(уроки)</a>
		<ul>
			<li><a href="#">C++</a></li>
			<li><a href="#">C#</a></li>
			<li><a href="#">Веб-технологии</a></li>
			<li><a href="#">Информационная безопасность</a></li>
			</ul>
		</li>
		<li><a href="#">О сайте</a></li>
		<li><a href="#">Команда проекта</a></li>
		<li><a href="#">Поддержать проект</a></li>
		<li><a href="#">Обратная связь</a></li>
	</ul>
</nav>
</body>
</html>


Это что такое?

Ты картинкой челе покажи чего хочешь получить в итоге...
Или возьми готовые решения по горизонтальным, выпадающим меню на ЦСС .
...
Рейтинг: 0 / 0
30.03.2017, 08:46
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопрос по выпадающему горизонтальному меню
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]