Адаптивный выпадающий список навигации открывается только при наведении курсора - PullRequest
Новая
       20

Адаптивный выпадающий список навигации открывается только при наведении курсора

0 голосов
/ 09 мая 2018

Я создаю адаптивное меню навигации с помощью flexbox, проблема заключается в опциях меню с раскрывающимся списком, раскрывающийся в раскрывающемся списке, когда я наводю курсор мыши на них на небольшом экране, вместо этого я хочу, чтобы он отображался только при нажатии на мобильном устройстве (после не зарегистрирован на мобильном телефоне afaik).

https://imgur.com/a/fDgVu95

Это мой код, как вы видите, я использую jquery: 

$(document).ready(function(){
	$(".nav_dropdown").click(function(e){
	  e.preventDefault();
      $(this).nextAll('.nav_dropdown_contents:first').toggleClass('visible');
    });

	
	$(".nav_menu_toggle").click(function(e){
	  e.preventDefault();
      $('.nav_link').toggleClass('visible');
    });





});
.nav_maincontainer{width:100%; height:50px; display:flex; align-items:center; padding:0px 100px; background-color:#004771; position:relative;}

.nav_link{font-size:17px; padding:0px 30px; color:white; display:flex; justify-content:center; align-items:center; height:100%; width:auto; }

.nav_link:first-child{margin-right:auto;}

.nav_link:nth-child(3){margin-left:auto;}

.nav_dropdown{width:auto; height:100%; position:relative;}

.nav_dropdown_btn{font-size:17px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:5px;}

.nav_dropdown_contents{display:none; min-width:200px; flex-direction:column; height:auto; position:absolute; top:100%; left:0px;}

.nav_dropdown_link{padding:15px 10px; background-color:#383838; font-size:15px; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{font-size:20px; color:white; display:none; width:50px; height:50px; }

.nav_dropdown:hover .nav_dropdown_contents{ display:flex;}

.nav_link:hover{background-color:#072060;}
@media only screen and (max-width: 736px) 
{
.nav_maincontainer{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; padding:0px; background-color:#004771; position:relative;}

.nav_link{font-size:16px; width:100%; height:45px; display:none; padding:0px 10px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.2); justify-content:flex-start; color:white;}

.nav_dropdown{width:100%; height:auto; position:relative;}

.nav_dropdown_btn{font-size:16px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:auto;}

.nav_dropdown_contents{display:none; min-width:100%; flex-direction:column; height:auto; font-size:15px; position:relative; top:0px; left:0px;}

.nav_dropdown_link{padding:0px 10px; height:45px; display:flex; align-items:center; background-color:#383838; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{width:100%; height:45px; display:flex; align-items:center; padding:10px; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_text{color:white; margin-right:auto; font-size:16px;}

.fa-bars{color:white; font-size:20px; margin-left:auto;}

.nav_dropdown:hover .nav_dropdown_contents{ display:flex;}

.nav_link:hover{background-color:#072060;}		
}

.flex   {display:flex;}
.visible{display:flex;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_maincontainer" style="">
    <a class="nav_menu_toggle" href="" onclick="">
        <span class="nav_menu_text">Menu</span>
        <i class="fa fa-bars"></i>
    </a>
    <a class="nav_link" href="/home" style="">Home</a>
    <a class="nav_link" href="/home" style="">Service</a>
    <a class="nav_link" href="/home" style="">Courses</a>
    <div class="nav_dropdown" style="">
        <a href="" class="nav_link" style="">Dropdown 
            <i class="fa fa-caret-down" style=""></i>
        </a>
        <div class="nav_dropdown_contents" style="">
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
        </div>
    </div>
    <a class="nav_link" href="/home" style="">Contact</a>
</div>

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Я считаю, что проблема в вашем nextAll (), так как вы нацелены на дочерние элементы, а не на братьев и сестер. JQuery: 

$(document).ready(function(){
    $(".nav_dropdown").click(function(e){
      e.preventDefault();
      $(this).find('.nav_dropdown_contents').toggleClass('visible');
    });


    $(".nav_menu_toggle").click(function(e){
      e.preventDefault();
      $('.nav_link').toggleClass('visible');
    });





});

CSS (я прокомментировал всплывающие подсказки, чтобы вы могли немного проще протестировать): 

.nav_maincontainer{width:100%; height:50px; display:flex; align-items:center; padding:0px 100px; background-color:#004771; position:relative;}

.nav_link{font-size:17px; padding:0px 30px; color:white; display:flex; justify-content:center; align-items:center; height:100%; width:auto; }

.nav_link:first-child{margin-right:auto;}

.nav_link:nth-child(3){margin-left:auto;}

.nav_dropdown{width:auto; height:100%; position:relative;}

.nav_dropdown_btn{font-size:17px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:5px;}

.nav_dropdown_contents{display:none; min-width:200px; flex-direction:column; height:auto; position:absolute; top:100%; left:0px;}

.nav_dropdown_link{padding:15px 10px; background-color:#383838; font-size:15px; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{font-size:20px; color:white; display:none; width:50px; height:50px; }

/* .nav_dropdown:hover .nav_dropdown_contents{ display:flex;} */

.nav_link:hover{background-color:#072060;}
@media only screen and (max-width: 736px) 
{
.nav_maincontainer{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; padding:0px; background-color:#004771; position:relative;}

.nav_link{font-size:16px; width:100%; height:45px; display:none; padding:0px 10px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.2); justify-content:flex-start; color:white;}

.nav_dropdown{width:100%; height:auto; position:relative;}

.nav_dropdown_btn{font-size:16px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:auto;}

.nav_dropdown_contents{display:none; min-width:100%; flex-direction:column; height:auto; font-size:15px; position:relative; top:0px; left:0px;}

.nav_dropdown_link{padding:0px 10px; height:45px; display:flex; align-items:center; background-color:#383838; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{width:100%; height:45px; display:flex; align-items:center; padding:10px; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_text{color:white; margin-right:auto; font-size:16px;}

.fa-bars{color:white; font-size:20px; margin-left:auto;}

/* .nav_dropdown:hover .nav_dropdown_contents{ display:flex;} */

.nav_link:hover{background-color:#072060;}      
}

.flex   {display:flex;}
.visible{display:flex;}

https://jsfiddle.net/onxcx0r4/3/

0 голосов
/ 09 мая 2018

Есть некоторые проблемы с вашим CSS, которые необходимо исправить. Добавлены комментарии, где необходимы исправления. 

.nav_dropdown {
  width: auto;
  heigh: 100%; // Typo 
  position: relative;
}
.nav_menu_toggle {
  font-size: 20px;
  color: white;
  display: none;
  width: 50px;
  height: 50px;
  width: 100%; // Duplicate width
}
.nav_dropdown {
    width: 100%;
    heigh: auto; // Typo
    position: relative;
  }

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

посмотрите на https://getbootstrap.com/docs/4.1/components/navs/

надеюсь, это поможет.

...