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

В тестовом примере не получается адаптивно привязать последнее
выпадающее подменю. Т.е., если в части коде css :

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
/**/
#tmenu li:nth-child(3) { /* [C1234] */
	width:35%;
}
#tmenu li:nth-child(3) ul a{         /* [ C1234 > ... ]  */
	width: 14.3em;
}
#tmenu li:nth-child(3) li ul {                             /* [ C1234 > ... > ... ]  */
	/*width: 14.3rem;*/
    background: #E6D7C3; 
    left: 200px;         
}
/**/



width: 14.3em заменить на width: 200px, то на малой ширине экрана адаптивность
подменю теряется ..., а при пользовании %, или em, - кривизна уже с самим подменю.

Так-же глючно ведет себя выделение строки при наведении, при кликах на строки подменю.
Вобщем, накосячил.

html
 

<body>
<div id="top-menu">
<ul id="tmenu">

<li><a>A1234</a></li>
<li><a>B123456</a></li>
<li><a>C1234  ></a>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3 большой длины.    ></a>
<ul>
<li><a>111</a></li>
<li><a>222</a></li>
<li><a>333</a></li>
</ul>
</li>
<li><a>4</a></li>
</ul>
</li>
<li><a>D12345678</a></li>
</ul>
</div>
<!-- Указатель - треугольник под меню. -->
<div id ="trian" style ="width:100%; height:4px; background: orange; color: red; border: solid 1px #E8DDCF; overflow: hidden; font-size: 14px;"><div style ="margin-top: -11px;">❤</div></div>

<!-- Контент -->
<div style ="width:100%; height:600px; background: #F3E7D8; border: solid 1px #E8DDCF;"></div>
</body>

css
 

body {
background-color: #F3E7D8;
}
html {overflow-y: scroll;}


#top-menu {
width:100%;
height:30px;
background: #E8DDCF;
border: solid 1px #E8DDCF;
}
#tmenu { /*для списка верхнего уровня*/
width:100%;
padding:0;
margin:0;
list-style-type:none;
position:relative;
}


#tmenu li:nth-child(1) { /* [A1234] */
width:20%;
}
#tmenu li:nth-child(2) { /* [B123456] */
width:15%;
}

/**/
#tmenu li:nth-child(3) { /* [C1234] */
width:35%;
}
#tmenu li:nth-child(3) ul a{ /* [ C1234 > ... ] */
width: 200px;
}
#tmenu li:nth-child(3) li ul { /* [ C1234 > ... > ... ] */
/*width: 14.3rem;*/
background: #E6D7C3;
left: 200px;
}
/**/

#tmenu li:nth-child(4) { /* [D12345678] */
width:30%;
}



#tmenu li{ /*для всех элементов списка всех уровней*/
float:left; /*выравнивание по левому краю*/
position:relative; /*Устанавливаем тип позиционирования*/
}
#tmenu li a{ /* для всех неактивных ссылок в списке */
color:blue; /* цвет текста */
font-size: 14px;
text-decoration:none; /* убираем подчеркивание */
display:block; /* превращаем в блочный элемент */
line-height:30px; /* межстрочный интервал */
text-align: center;
}




@media (max-width: 880px) {
#tmenu li a{font-size: 12px;}
}
@media (max-width: 786px) {
#tmenu li a{font-size: 10px;}
}
@media (max-width: 687px) {
#tmenu li a{font-size: 9px;}
}
@media (max-width: 612px) {
#tmenu li a{font-size: 7px;}
}




#tmenu li a:hover{ /*для всех активных ссылок в списке*/
background-color: #DECAAF; /* Фон при наведении курсора мыши на все надписи*/
}

#tmenu li ul li{ /* Для всех элементов вложенных списков */
float:none; /* Убираем выравнивание*/
}
#tmenu li ul li a{ /* Для всех ссылок внутри элементов вложенных списков */
line-height:25px; /* Устанавливаем межстрочный интервал */
}
#tmenu li ul{ /* Для всех блоков вложенных ненумерованных списков */
display:none; /* Выключаем отображение */
position:absolute; /* Позиционируем абсолютно */
background-color: #E6D8C5; /* Устанавливаем фон у выпадающего списка */
list-style:none; /* Отключаем маркеры */
padding:0; /* Отключаем внутренние отступы */
}
#tmenu li:hover ul{ /* Для всех блоков вложенных ненумерованных списков при активации*/
display:block; /* Включаем отображение */
}
#tmenu li ul li ul, /* Для всех блоков вложенных списков третьего и ниже уровней */
#tmenu li:hover ul li ul{ /* А также для них же, но при условии активации списка второго уровня*/
display:none; /*Выключаем отображение*/
position:absolute; /*Позиционируем абсолютно*/
top:0; /*Прижимаем к верхнему краю род. элемента, указав 0*/
}
#tmenu li ul li:hover ul{ /*Для всех блоков вложенных списков третьего и ниже уровней при активации*/
display:block; /*Включаем отображение*/
}

js
 

var mm = '';
document.getElementById('tmenu').addEventListener("click", menu_onclick_changeColor, true); // <script src="...js" defer></script>
// ^
function menu_onclick_changeColor(s) {

var target = event.target || event.srcElement;
if ( target.style != mm ) {

target.style.background = 'red'; // пункт меню, на который кликнули - делаю другим цветом;

var rect = target.getBoundingClientRect();
var dist = rect.left; // расст. до левого края, чтобы двигать указатель-треугольник снизу от кнопок Меню;
var vid = rect.width; // ширина кнопки, по которой кликнули, чтобы точно позиционировать указ.-треугольник;

var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; // ширина окна;
document.getElementById('trian').firstElementChild.style.marginLeft = ''+(((dist+vid/2) *100) / x*1.008).toFixed()+'%';

if (mm != '') {
mm.background = '#E8DDCF';
}

mm = target.style;
}
}
...
Рейтинг: 0 / 0
27.09.2016, 17:18
| Ответить | Цитировать | Написать  
Горизонтальное меню с выпадающим списком и его адаптивность
    #39316434
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
 

Код: 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.
<body>
<div id="top-menu">
<ul id="tmenu">

	<li><a>A1234</a></li>   
	<li><a>B123456</a></li>
	<li><a>C1234 &nbsp;></a>
	         <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3 большой длины. &nbsp;&nbsp;&nbsp;></a>
                	                 <ul>
                	                   <li><a>111</a></li> 
                	                   <li><a>222</a></li>
                	                   <li><a>333</a></li>
                	                 </ul>	
                </li>
                <li><a>4</a></li>
             </ul>
	</li>
	<li><a>D12345678</a></li>
</ul>
</div>	
<!-- Указатель-треугольник под меню. -->
<div id ="trian" style ="width:100%; height:4px; background: orange; color: red; border: solid 1px #E8DDCF; overflow: hidden; font-size: 14px;"><div style ="margin-top: -11px;">&#10084;</div></div>

<!-- Контент -->
<div style ="width:100%; height:600px; background: #F3E7D8; border: solid 1px #E8DDCF;"></div>
</body>



 

Код: 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.
body { 
  background-color: #F3E7D8;
}                           
html {overflow-y: scroll;}    
                            

#top-menu {
	width:100%;
	height:30px;
    background: #E8DDCF;
    border: solid 1px #E8DDCF;
}
#tmenu {      /*для списка верхнего уровня*/
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
    position:relative;
}


#tmenu li:nth-child(1) { /* [A1234] */
	width:20%;
}
#tmenu li:nth-child(2) { /* [B123456] */
	width:15%; 
}

/**/
#tmenu li:nth-child(3) { /* [C1234] */
	width:35%;
}
#tmenu li:nth-child(3) ul a{         /* [ C1234 > ... ]  */
	width: 200px;
}
#tmenu li:nth-child(3) li ul {                             /* [ C1234 > ... > ... ]  */
	/*width: 14.3rem;*/
    background: #E6D7C3; 
    left: 200px;         
}
/**/

#tmenu li:nth-child(4) { /* [D12345678] */
	width:30%;
}



#tmenu li{        /*для всех элементов списка всех уровней*/
	float:left;                /*выравнивание по левому краю*/
    position:relative;         /*Устанавливаем тип позиционирования*/
}
#tmenu li a{                   /* для всех неактивных ссылок в списке */
	color:blue;                /* цвет текста                         */
	font-size: 14px;
	text-decoration:none;      /* убираем подчеркивание               */
	display:block;             /* превращаем в блочный элемент        */
	line-height:30px;          /* межстрочный интервал                */
    text-align: center;
}




@media (max-width: 880px) {
    #tmenu li a{font-size: 12px;}
}
@media (max-width: 786px) {
    #tmenu li a{font-size: 10px;}
}
@media (max-width: 687px) {
    #tmenu li a{font-size: 9px;}
}
@media (max-width: 612px) {
    #tmenu li a{font-size: 7px;}
}




#tmenu li a:hover{ /*для всех активных ссылок в списке*/
	background-color: #DECAAF;    /* Фон при наведении курсора мыши на все надписи*/
}

#tmenu li ul li{  /* Для всех элементов вложенных списков */
    float:none;                   /* Убираем выравнивание*/
}
#tmenu li ul li a{                /* Для всех ссылок внутри элементов вложенных списков */
    line-height:25px;             /* Устанавливаем межстрочный интервал */
}
#tmenu li ul{     /* Для всех блоков вложенных ненумерованных списков */
    display:none;                 /* Выключаем отображение */
    position:absolute;            /* Позиционируем абсолютно */
    background-color: #E6D8C5;    /* Устанавливаем фон у выпадающего списка */
    list-style:none;              /* Отключаем маркеры */
    padding:0;                    /* Отключаем внутренние отступы */
}
#tmenu li:hover ul{  /* Для всех блоков вложенных ненумерованных списков при активации*/
    display:block;                /* Включаем отображение */
}
#tmenu li ul li ul,               /* Для всех блоков вложенных списков третьего и ниже уровней */
#tmenu  li:hover ul li ul{        /* А также для них же, но при условии активации списка второго уровня*/        
    display:none;                 /*Выключаем отображение*/
    position:absolute;            /*Позиционируем абсолютно*/
    top:0;                        /*Прижимаем к верхнему краю род. элемента, указав 0*/
}
#tmenu li ul li:hover ul{ /*Для всех блоков вложенных списков третьего и ниже уровней при активации*/
    display:block;                /*Включаем отображение*/
}



 

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
var mm = '';
document.getElementById('tmenu').addEventListener("click", menu_onclick_changeColor, true); // <script src="...js" defer></script>
//                                                                                                                  ^
function menu_onclick_changeColor(s) {

var target = event.target || event.srcElement;
if ( target.style != mm ) {

  target.style.background = 'red';                 // пункт меню, на который кликнули - делаю другим цветом;
                                        
  var rect = target.getBoundingClientRect();
  var dist = rect.left;                            // расст. до левого края, чтобы двигать указатель-треугольник снизу от кнопок Меню;
  var vid = rect.width;                            // ширина кнопки, по которой кликнули, чтобы точно позиционировать указ.-треугольник;

  var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; // ширина окна;
  document.getElementById('trian').firstElementChild.style.marginLeft = ''+(((dist+vid/2) *100) / x*1.008).toFixed()+'%';

  if (mm != '') {
    mm.background = '#E8DDCF';
  }

  mm = target.style;
}  
}


...
Рейтинг: 0 / 0
27.09.2016, 17:37
| Ответить | Цитировать | Написать  
Горизонтальное меню с выпадающим списком и его адаптивность
    #39316604
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
т.е. при таком участке css кода :
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
/**/
#tmenu li:nth-child(3) { /* [C1234] */
	width:35%;
}
#tmenu li:nth-child(3) ul a{         /* [ C1234 > ... ]  */
    width: 14.3em;
}
#tmenu li:nth-child(3) li ul {                             /* [ C1234 > ... > ... ]  */
	/*width: 14.3rem;*/
    background: #E6D7C3; 
    left: 200px;         
}
/**/


на полном экране :
 


...
Рейтинг: 0 / 0
28.09.2016, 00:05
| Ответить | Цитировать | Написать  
Горизонтальное меню с выпадающим списком и его адаптивность
    #39316607
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
он же на узком экране, - выпадающий список кривой :
...
Рейтинг: 0 / 0
28.09.2016, 00:08
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Горизонтальное меню с выпадающим списком и его адаптивность
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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