#javascript #jquery #html #css #mobile
#javascript #jquery #HTML #css #Мобильный
Вопрос:
У меня есть панель меню навигации, которая работает действительно хорошо.
Я хочу сделать его адаптивным и смог настроить свой код с помощью javascript и css для использования значка списка, который появляется, когда размер экрана становится ниже порогового значения 680 пикселей. Похоже, что при просмотре меню на мобильном устройстве возникает несколько проблем с кодом, а также проблемы с форматированием для просмотра на экранах меньшего размера.
1: Значок списка будет скрываться за меню, которое отображается вертикально на мобильном устройстве. На него сложно нажать, но вы можете щелкнуть по нему, чтобы превратить меню обратно в значок списка.
2. В меню есть несколько выпадающих меню с подменю (показано на рисунке выше), которые накладываются друг на друга, затрудняя нажатие. Это также приводит к тому, что мобильные устройства «перезагружаются и фокусируются на верхней части страницы, но с открытым подменю».
3. Подменю, если текст слишком длинный, затекают за визуальную часть страницы, иногда затрудняя чтение ссылки целиком.
Что я пытаюсь выяснить, так это форматирование меню, чтобы оно было более привлекательным с точки зрения контекста при реагировании. Это означает, что когда экран сжимается или просматривается на меньшем экране / мобильном устройстве, формат меню меняется. Значок списка выводит основные навигационные ссылки, затем каждая вспомогательная ссылка выводит всю навигацию, как показано на следующем изображении Пример адаптивного навигационного меню
Я создал jsfiddle, чтобы помочь понять код. https://jsfiddle.net/rm2rL373 /
<div class="container">
<nav>
<ul id="myNavi" class="navi" style="font-size:16px; padding-top:5px;">
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">amp;#9776;</a>
</li>
<li><a href="#">Nav1</a>
<ul>
<li><a href="#">SubNav1</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="#" >SubNav2</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="#">SubNav3</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="#">SubNav4</a>
<ul>
<li><a href="link.html" target="_blank">Sublink1</a></li>
<li><a href="link.html" target="_blank">Sublink2</a></li>
<li><a href="link.html" target="_blank">Sublink3</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
<li><a href="#">Nav2</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="#" class="MenuBarItemSubmenu">SubNav1</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
</ul>
</li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
<li><a href="#">Nav3</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
</ul>
</li>
<li><a href="#">Nav4</a>
<ul>
<li><a href="link.html" target="_blank">SubNavLink1</a></li>
<li><a href="link.html" target="_blank">SubNavLink2</a></li>
<li><a href="link.html" target="_blank">SubNavLink3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
ul {
list-style-type: none;
}
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
.navi a {
display:block;
background: #ededed;
color: #111;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #E3E3E3;
position: relative;
}
.navi{
vertical-align: top;
display: inline-block;
box-shadow:
1px -1px -1px 1px #000,
-1px 1px -1px 1px #fff,
0 0 6px 3px #fff;
border-radius:6px;
}
.navi li {
position: relative;
}
.navi > li {
float: left;
border-bottom: 4px #E3E3E3 solid;
margin-right: 1px;
}
.navi > li > a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #E5E5E5;
}
.navi > li:hover,
.navi > li:hover > a {
border-bottom-color: blue;
}
.navi li:hover > a {
color:blue;
background-color: #E5E5E5;
}
.navi > li:first-child {
border-radius: 4px 0 0 4px;
}
.navi > li:first-child > a {
border-radius: 4px 0 0 0;
}
.navi > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.navi > li:last-child > a {
border-radius: 0 4px 0 0;
}
.navi li li a {
margin-top: 1px;
}
.navi li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
/*Submenu Position*/
.navi ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
}
.navi > li:hover > ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.navi > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/*Arrow Styling*/
.navi > li > a:first-child:nth-last-child(2):before {
border-top-color: #575757;
}
.navi > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: blue;
margin-top:-5px
}
.navi li li > a:first-child:nth-last-child(2):before {
border-left-color: #575757;
margin-top: -5px
}
.navi li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: blue;
right: 10px;
}
ul.navi li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the nav (li.icon) */
@media screen and (max-width:680px) {
ul.navi li:not(:first-child) {display: none;}
ul.navi li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the nav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens */
@media screen and (max-width:680px) {
ul.navi.responsive {position: relative;}
ul.navi.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.navi.responsive li {
float: none;
display: inline;
}
ul.navi.responsive li a {
display: block;
text-align: left;
}
}
function myFunction() {
var x = document.getElementById("myNavi");
if (x.className === "navi") {
x.className = " responsive";
} else {
x.className = "navi";
}
}
Комментарии:
1. это не решение, но первым шагом является изменение положения подменю: относительное для устройств меньшего размера
2. По какой-то причине, когда вы используете пример jsfiddle и запускаете его, он не позволяет вам видеть меню при уменьшении размера экрана. По крайней мере, в моем браузере. На странице моего проекта пример работает нормально, но имеет ошибки, показывающие значок списка после его нажатия.
3. @mike smith, я полагаю, что у меня уже есть это с css .navi li { position: relative;}