เมนูแบบเลื่อนลงที่ตอบสนอง - ซ่อนรายการเมนูที่แสดงก่อนหน้านี้เมื่อขนาดหน้าจอเพิ่มขึ้นถึงจุดพัก

ฉันกำลังออกแบบเมนูแบบเลื่อนลงแบบตอบสนองพร้อมมาร์กอัปที่คล้ายกับสิ่งนี้:

<nav id="nav" role="navigation"> 
  <a href="/th#nav">Show navigation</a>
  <a href="/th#">Hide navigation</a>
  <ul>
    <li><a href="/th/landingpage.html">anchor link 1</a>
        <div class="show-hide">
            <div class="show">►</div>
            <div class="hide">▼</div>
        </div>
        <ul class="submenu">
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </li>
   etc...
  </ul>
</nav>

ลิงก์จุดยึดยังเป็นไฮเปอร์ลิงก์ไปยังหน้า Landing Page บนหน้าจอขนาดใหญ่ การนำทางจะเป็นแนวนอน และฉันใช้ CSS เพื่อให้เมนูย่อยแสดงเมื่อโฮเวอร์ เพื่อให้ลิงก์จุดยึดยังคงสามารถคลิกได้

CSS ที่ควบคุมการโฮเวอร์:

#nav ul > li > .submenu {
display: none;
}

@media only screen and (min-width: 768px){
  #nav li:hover > .submenu {
    display:block;
  }
}

บนหน้าจอขนาดเล็ก การนำทางจะยุบลงในแถบเมนูการนำทางแนวตั้งที่แสดงลิงก์จุดยึด พร้อมด้วยลูกศรทางด้านขวาของลิงก์จุดยึด เมนูย่อย (โดยใช้ jQuery slideToggle) จะแสดงขึ้นเมื่อมีการคลิกลูกศรเหล่านี้ ลิงก์ Anchor ยังคงชี้ไปที่หน้า Landing Page แม้ว่าการเลื่อนเมาส์ไปเหนือลิงก์เหล่านั้นจะไม่แสดงเมนูย่อยอีกต่อไป

jQuery ที่ควบคุม slideToggle() เมื่อคลิก:

$(".show-hide").click(function() {
  $(this).next('ul').slideToggle();
  $('div',this).toggle();
});

http://jsfiddle.net/NxDe8/3/ jsfiddle ของการวนซ้ำเมนูปัจจุบัน< /แข็งแกร่ง>

ปัญหาของฉันเกิดขึ้นเมื่อ ผู้ใช้โต้ตอบกับเมนูเวอร์ชันหน้าจอขนาดเล็กแนวตั้ง แล้วปรับขนาดหน้าจอเพื่อเรียกใช้เมนูเวอร์ชันแนวนอนที่มีหน้าจอขนาดใหญ่

เริ่มต้นจากหน้าจอขนาดเล็ก ผู้ใช้คลิกที่ลูกศรเพื่อแสดงเมนูย่อย จากนั้นผู้ใช้ปรับขนาดหน้าต่างเพื่อให้แถบนำทางแนวนอนหน้าจอขนาดใหญ่ปรากฏขึ้น โฮเวอร์ยังคงใช้งานได้ แต่เมนูย่อยยังคงมองเห็นได้ หากผู้ใช้ปิดเมนูย่อยบนหน้าจอขนาดเล็กก่อนที่จะขยายหน้าต่างเพื่อเรียกเมนูแนวนอนของหน้าจอขนาดใหญ่ เมนูย่อยจะยังคงซ่อนอยู่ แต่การวางเมาส์เหนือจะไม่ทำงานเพื่อแสดงเมนูย่อยอีกต่อไป

ฉันได้ลองใช้ jQuery แทน CSS เพื่อควบคุมโฮเวอร์ เชื่อมโยงฟังก์ชันโฮเวอร์กับขนาดหน้าจอ และซ่อนเมนูย่อยโดยอัตโนมัติเมื่อเพิ่มขนาดหน้าต่าง สิ่งนี้จะพังหลังจากการปรับขนาดและการคลิกไม่กี่ครั้ง: http://jsfiddle.net/ps3Tq/4/

ฉันได้ลองรวมฟังก์ชัน slideToggle() กับหน้าต่างขนาดเล็กแล้ว แต่ในกรณีนี้ เมนูย่อยจะเด้งขึ้นและลงโดยไม่แก้ไขปัญหาใดๆ

ฉันยังใหม่กับ jQuery และฉันก็นิ่งงันมาก ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ขอบคุณ!


drop-down-menu jquery css responsive-design hover
person jj080808    schedule 01.08.2013    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

ลองดูสิ:

http://jsfiddle.net/NxDe8/4/

โดยพื้นฐานแล้วฉันเพิ่งทำให้ทุกอย่างใช้ jQuery แทนการผสม

JS:

$('#nav li').on('mouseenter', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideDown();
    }
});

$('#nav li').on('mouseleave', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideUp();
    }
});

$(window).on('resize', function() {
    if ($(window).width() > 768) {
        $('.submenu, .hide').hide();
        $('.show').show();

    }
});

ซีเอสเอส:

/* second level */

 #nav ul li .submenu {
    display: none;
    position: absolute;
}
person Dan P.    schedule 01.08.2013
comment
ขอบคุณขอบคุณขอบคุณ! มันใช้งานได้อย่างสวยงาม! ตอนนี้เพื่อทดสอบเบราว์เซอร์และอุปกรณ์ต่างๆ... - person jj080808; 06.08.2013