Я относительный новичок в веб-дизайне, который работал над личным проектом \ обучение около 4 месяцев, чтобы помочь мне учиться.Отзывчивый навигационный бар toggle
У меня есть все глубже и глубже в этом, и я потратил несколько недель, пытаясь сделать рабочий стол на рабочем столе, который я сделал отзывчивым. Тем не менее, я изо всех сил пытаюсь заставить свой «мобильный» рабочий стол работать так, как должен, и искать и искать, но не может найти ответ на мою проблему. Я пробовал разные подходы, но безрезультатно.
В основном с тем, что у меня есть, в настоящий момент Гамбургер продолжает снижаться до нижней части меню, вместо того, чтобы оставаться на месте в панели Nav. Если я задаю это абсолютное значение, которое, похоже, решает эту проблему, тогда я не могу правильно это позиционировать в панели Nav.
Также я пытался заставить Гамбургер сместиться слева и заполнить около 70% экрана гамбургером, сползающим вправо, снова безрезультатно. Какой бы подход ни работал, и все, что я могу получить, - это выпадающее меню. Я подозреваю, что что-то происходит с моим испорченным кодом, который я не понимаю. Как новичок, я пытаюсь включить то, что я прочитал, как лучшую практику, и понимаю, что некоторые из моих кодов могут быть длинными, и немного промаха, поэтому любые советы о том, как его очистить, будут высоко оценены.
Общая идея о том, что я пытаюсь достичь этого: http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html
Я раздел код вернуться к основам, а все, что я пытаюсь не работаю, и это JSFiddle https://jsfiddle.net/pr3tr3y2/4/
HTML:
<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">
<ul class="active">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li>
<a href="MainPage.aspx">Menu 3</a>
<ul class="submenu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li>
<a href="#">Menu 4</a>
<ul class="submenu">
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
</ul>
<div class="hamburgerWrapper">
<div class="toggle-nav"><a href="#">Menu</a></div>
</div>
</nav>
</div>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="../Javascript/JavaScript.js"></script>
CSS:
@import url(UndoHTML.css);
#container
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
text-align:center;
}
/*For mobile phones*/
/*NAVIGATION MENUS*/
.nav
{
background-color: black;
}
.navWrapper
{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: column;
flex-grow: 1;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);*/
}
/*HORIZONTAL MENU*/
.menu
{
flex-grow: 1;
}
.menu ul
{
list-style: none;
}
.menu ul.active
{
display:none;
}
.menu ul li
{
position: relative;
font-weight: bold;
border-bottom: 1px solid #b3c4e6;
}
.menu ul li a
{
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display:block;
color: #fff;
padding:16px 16px 12px 16px;
border-bottom:5px solid transparent;
}
.menu ul li a:hover
{
background-color: red;
border-bottom: 5px solid #7EF300;
color: #FFDB00;
}
/*HAMBURGER*/
.hamburgerWrapper
{
display: flex;
flex-grow: 1;
justify-content:flex-start;
padding: 10px;
}
.toggle-nav
{
background: linear-gradient(
to bottom,
#FFF 0%, #FFF 20%,
transparent 20%, transparent 40%,
#FFF 40%, #FFF 60%,
transparent 60%, transparent 80%,
#FFF 80%, #FFF 100%);
cursor: pointer;
height: 24px;
transition: opacity .5s ease;
width: 32px;
color: white;
display: inline-block;
}
.toggle-nav a
{
display:inline-block;
color:#fff;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 60px;
padding-right: 10px;
}
/*Sub Menu*/
.menu ul li:hover ul
{
display: none;
}
.submenu
{
display:none;
position:absolute;
background-color: black;
white-space: nowrap;
width: 100%;
list-style-type: none;
}
.submenu > li > a
{
text-align: left;
/*border-top: 1px solid rgba(255, 255, 255, 0.3);*/
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display:block;
color: #fff;
padding:7px 16px 5px 16px;
border-bottom:5px solid transparent; /*To offset white underline hover*/
}
.submenu > li:hover > a
{
background-color:red;
color: #FFDB00;
border-bottom: 5px solid #7EF300;
}
#contentLayer
{
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
}
/*Medium Screens*/
@media all and (min-width: 600px) and (max-width: 999px)
{
.toggle-nav
{
display:none;
}
.hamburgerWrapper
{
display: none;
}
.navWrapper
{
justify-content: center;
width:100%;
margin:auto;
}
.menu
{
flex-grow: 1;
width: 100%;
}
.menu ul.active
{
display:flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.menu ul li
{
border-bottom: none;
}
.menu ul li:last-of-type
{
margin:0;
}
.menu ul li:hover ul
{
display: block;
}
}
/*Large Screens*/
@media all and (min-width: 1000px)
{
.navWrapper
{
max-width: 1366px;
width:100%;
margin:auto;
}
.toggle-nav
{
display:none;
}
.hamburgerWrapper
{
display: none;
}
.menu
{
flex-grow: 1;
width: 100%;
}
.menu ul.active
{
display:flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.menu ul li
{
border-bottom: none;
white-space: nowrap;
}
.menu ul li:hover ul
{
display: block;
}
}
Jquery:
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
это может быть полезно для вас https://github.com/purgeru/mmenu-Bootstrap-3 –
Жаль, что я пытаюсь узнать это, не используя ничего подобного Bootstrap, как я хочу учиться с нуля. – Damo