Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопрос по выпадающему горизонтальному меню / 9 сообщений из 9, страница 1 из 1
29.03.2017, 10:59
    #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, 11:00
    #39429024
ukugyul552465
ukugyul552465
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопрос по выпадающему горизонтальному меню
И не подскажите, как высоту привязать по процентам? Пробовал, однако при любых значениях получается узкая полоска, намного меньшая размера текста.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.03.2017, 11:29
    #39429050
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопрос по выпадающему горизонтальному меню
ukugyul552465И не подскажите, как высоту привязать по процентам? Пробовал, однако при любых значениях получается узкая полоска, намного меньшая размера текста.
"Процентовка" элемента полностью зависит от размеров его родителя. Т.ч. проверяй родительский размер...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.03.2017, 12:47
    #39429154
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопрос по выпадающему горизонтальному меню
ukugyul552465,

если браузеры не старые, то попробуйте ещё через Flexbox
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.03.2017, 15:39
    #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, 17:51
    #39429450
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вопрос по выпадающему горизонтальному меню
ukugyul552465,

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

Из первого сообщения ukugyul552465... чтобы на больших экранах не было пустого места справа от менюя понял, что вроде всё ОК. А сделайте сайт просто по центру окна браузера. Это довольно популярное решение, и мучиться не надо   http://htmlbook.ru/samlayout/tipovye-makety
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.03.2017, 21:03
    #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:05
    #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
| Ответить | Цитировать | Написать  
30.03.2017, 08:46
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопрос по выпадающему горизонтальному меню / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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