Tôi đang sử dụng trình đơn thả xuống siêu cá với khung skelton. Tôi cũng muốn nó hoạt động trên điện thoại di động. Theo mặc định nó hiển thị các mục thả xuống nhưng nó di chuột qua các mục bên dưới nó. Tôi muốn có nó theo cách để nó đẩy các mục cha bên dưới nó. Bất kì giải pháp nào?Làm thế nào để làm cho menu thả xuống siêu câu trả lời?
Cập nhật: Xem câu trả lời bởi Ryan Brackett
menu thả xuống không hoạt động tốt trên điện thoại di động. Tôi sẽ đề nghị ẩn menu superfish trên thiết bị di động và thay thế bằng một thứ khác.
Resources: Tắt canvas
http://www.lukew.com/ff/entry.asp?1569
http://www.zurb.com/playground/off-canvas-layouts
mẫu navigation Mobile
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Đối với những người khác đang tìm kiếm giải pháp, hãy đảm bảo bạn đang sử dụng jQuery mới nhất. Tôi đã có một số trang web cũ hơn, nơi tôi tìm thấy bằng cách sử dụng một phiên bản mới hơn của jQuery làm cho các menu Superfish hoạt động trên các thiết bị di động.
Dưới đây là một câu trả lời tốt hơn
tôi đã có thể chuyển đổi mã HTML tương tự cho Superfish vào một menu ngăn kéo đáp ứng. JS là cực kỳ đơn giản và toàn bộ điều cơ bản được thực hiện bằng cách sử dụng CSS. Kiểm tra nó ra và cho tôi biết những gì các bạn nghĩ!
// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(
function() {
$('.sf-menu').toggleClass("xactive");
});
// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(
function() {
$(this).parent().toggleClass("xpopdrop");
});body {
font-family: Arial;
font-size: 12px;
padding: 20px;
}
#mobnav-btn {
display: none;
font-size: 20px;
font-weight: bold;
background-color: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.mobnav-subarrow {
display: none;
}
@media only screen and (max-width: 480px) {
#mobnav-btn {
display: block;
}
.mobnav-subarrow {
display: block;
background-color: #0f3975;
opacity: .3;
border-bottom: 1px solid white;
border-top: 1px solid black;
height: 20px;
width: 30px;
background-position: top left!important;
position: absolute;
top: 8px;
right: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.sf-menu {
width: 100%!important;
display: none;
}
.sf-menu.xactive {
display: block!important;
}
.sf-menu li {
float: none!important;
display: block!important;
width: 100%!important;
}
.sf-menu li a {
float: none!important;
}
.sf-menu ul {
position: static!important;
display: none!important;
}
.xpopdrop ul {
display: block!important;
}
}<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" />
<small>This is a responsive Superfish Menu by <a href="mailto:[email protected]">Ryan Brackett</a>. <br/>
<br/>In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish</small>
<br/>
<br/>
<div id="mobnav-btn">Button</div>
<ul class="sf-menu">
<li><a href="#">Item 1</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 1.1</a>
</li>
<li><a href="#">Subitem 1.2</a>
</li>
<li><a href="#">Subitem 1.3</a>
</li>
<li><a href="#">Subitem 1.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 2.1</a>
</li>
<li><a href="#">Subitem 2.2</a>
</li>
<li><a href="#">Subitem 2.3</a>
</li>
<li><a href="#">Subitem 2.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 3.1</a>
</li>
<li><a href="#">Subitem 3.2</a>
</li>
<li><a href="#">Subitem 3.3</a>
</li>
<li><a href="#">Subitem 3.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 4</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 4.1</a>
</li>
<li><a href="#">Subitem 4.2</a>
</li>
<li><a href="#">Subitem 4.3</a>
</li>
<li><a href="#">Subitem 4.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 5</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 5.1</a>
</li>
<li><a href="#">Subitem 5.2</a>
</li>
<li><a href="#">Subitem 5.3</a>
</li>
<li><a href="#">Subitem 5.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 6</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 6.1</a>
</li>
<li><a href="#">Subitem 6.2</a>
</li>
<li><a href="#">Subitem 6.3</a>
</li>
<li><a href="#">Subitem 6.4</a>
</li>
</ul>
</li>
</ul>Đây là những gì tôi sử dụng:
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
$(".menu a").click(function(event){
if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
event.preventDefault();
$(".menu a").removeClass("lastClick");
$(this).addClass("lastClick");
});
Thay thế ".menu một" với các liên kết điều hướng của bạn và đoạn này sẽ hướng người dùng đến trang web nhấp sau thứ hai nhấp và nhấp chuột đầu tiên sẽ chỉ hiển thị cho anh các trang con.
Xin chào, bạn có thể JSfiddle điều này cho chúng tôi không? –
Reshad: Đơn giản chỉ cần thay đổi CSS của bạn như thế này:
.xpopdrop > ul {
display: block!important;
}Và bạn sẽ ổn thôi.
Như Ed đã chỉ ra rằng có vẻ như có vấn đề để giải quyết tất cả các vấn đề về siêu câu cá/css khác nhau cho một menu đáp ứng.
Sau khi xem qua các tùy chọn ở đây và ở nơi khác, tôi đã tìm thấy menu CSS đáp ứng CSS nhanh hơn và dễ dàng hơn so với siêu cá và không có chi phí jquery hoặc javascript. Nó cũng có các menu cấp độ thứ hai.
Tôi đã kiểm tra the demo với screenfly để kiểm tra độ nhạy và bố cục thiết bị di động trước khi sử dụng. Phiên bản CSSscript.com (liên kết ở trên) cung cấp bố cục đáp ứng ngang cho điện thoại di động, không giống như trang demo codepen.
Mã này là trong một file HTML duy nhất mà bạn có thể dễ dàng tách ra thành một file CSS liên kết, chỉ có 2 truy vấn phương tiện truyền thông quản lý những thay đổi đáp ứng và thậm chí sau đó chỉ với những thay đổi tối thiểu. Các ký hiệu '+' có thể bị xóa mà không có vấn đề gì.
Chỉ có một nhược điểm nhỏ: liên kết đầu tiên tải xuống HTML có javascript ở phía dưới, thêm theo dõi phân tích google rõ ràng, dễ dàng xóa và không được mã hóa.
Explanationauthor andor nagy - code from codepen
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
\t background: #212121;
\t font-size:22px;
\t line-height: 32px;
\t color: #ffffff;
\t word-wrap:break-word !important;
\t font-family: 'Open Sans', sans-serif;
\t }
h1 {
\t font-size: 60px;
\t text-align: center;
\t color: #FFF;
} \t
h3 {
\t font-size: 30px;
\t text-align: center;
\t color: #FFF;
}
h3 a {
\t color: #FFF;
}
a {
\t color: #FFF;
}
h1 {
\t margin-top: 100px;
\t text-align:center;
\t font-size:60px;
\t font-family: 'Bree Serif', 'serif';
\t }
#container {
\t margin: 0 auto;
\t max-width: 890px;
}
p {
\t text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
} \t
nav {
\t margin: 50px 0;
\t background-color: #E64A19;
}
nav ul {
\t padding:0;
\t margin:0;
\t list-style: none;
\t position: relative;
\t }
\t
nav ul li {
\t display:inline-block;
\t background-color: #E64A19;
\t }
nav a {
\t display:block;
\t padding:0 10px; \t
\t color:#FFF;
\t font-size:20px;
\t line-height: 60px;
\t text-decoration:none;
}
nav a:hover {
\t background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
\t display: none;
\t position: absolute;
\t top: 60px;
}
\t
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
\t display:inherit;
}
\t
/* Fisrt Tier Dropdown */
nav ul ul li {
\t width:170px;
\t float:none;
\t display:list-item;
\t position: relative;
}
/* Second, Third and more Tiers \t */
nav ul ul ul li {
\t position: relative;
\t top:-60px;
\t left:170px;
}
\t
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }<div id="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
\t <!-- Second Tier Drop Down -->
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign (+)</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>Điều này hoàn toàn hiểu lầm điểm của trình đơn Superfish, bản thân nó bắt đầu từ trình đơn thả xuống "CSS tinh khiết" và tăng cường nó. – DisgruntledGoat
bạn nên bao gồm css và html của bản trình diễn có bố cục đáp ứng hoạt động. Không phải là codepen không phản hồi – Toskan
Cảm ơn thông tin - chỉ trả lời câu hỏi cụ thể về Superfish. –
Ví dụ tốt. Đã cập nhật câu trả lời của tôi cho người dùng trực tiếp tại đây. –
Có thể sử dụng 3 lớp cho menu thay vì 2? – Reshad