Вопрос по jquery, javascript, html, responsive-design, css – Как сделать выпадающее меню Superfish отзывчивым?

11

Я использую выпадающее меню суперфиш с Skelton Framework. Я хотел, чтобы это работало и на мобильных телефонах. По умолчанию он показывает выпадающие элементы, но он находится над элементами под ним. Я хочу, чтобы он был таким, чтобы родительские элементы помещались ниже него. Любое решение?

Ваш Ответ

5   ответов
0

    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");
    });

Заменить ".menu a" с вашими навигационными ссылками, и этот фрагмент будет перемещать пользователя на выбранный сайт после второго щелчка, и первый щелчок покажет ему только подстраницы.

Эй, чувак, можешь JSfiddle это для нас?
9

Update:

Выпадающие меню не очень хорошо работают на мобильных устройствах. Я бы предложил скрыть меню суперфиш на мобильном телефоне и заменить его чем-то другим.

Ресурсы: Off canvas

http://www.lukew.com/ff/entry.asp?1569

http://www.zurb.com/playground/off-canvas-layouts

Mobile navigation patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Для тех, кто ищет решение, убедитесь, что вы используете новейшую версию jQuery. У меня были старые сайты, где я обнаружил, что с использованием более новой версии jQuery меню Superfish работает на мобильных устройствах.

1

кажется, проблематично решить все проблемы superfish / css для адаптивного меню.

Просматривая варианты здесь и в других местах, я нашел Pure CSS-адаптивное меню, которое было быстрее и легче изменить, чем суперфиш, и не имеет накладных расходов jquery или javascript. Он также имеет меню второго уровня.

Я проверилдемо с screenfly, чтобы проверить отзывчивость и мобильную разметку перед его использованием. Версия CSSscript.com (ссылка выше) предоставляет горизонтальный адаптивный макет для мобильных телефонов, в отличие от демонстрационной страницы codepen.

Pure Responsive CSS menu

mobile view from screenfly,  320px wide

Код находится в одном HTML-файле, который вы можете легко разделить на связанный CSS-файл, только 2 медиа-запроса управляют адаптивными изменениями и даже только с минимальными изменениями. «+» Символы могут быть удалены без проблем.

Единственный крошечный недостаток: первая ссылка загружает HTML, в нижней части которого есть javascript, добавляющий очевидное отслеживание Google Analytics, легко удаляемое, а не на codepen.

объяснение автор andor nagy - код из codepen

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-size:22px;
	line-height: 32px;
	color: #ffffff;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	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%;
}	

nav { 
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px;
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* 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>
            	<!-- 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>

Спасибо за информацию - просто отвечаю на конкретный вопрос о Superfish.
Вы должны включить css и html демонстрации с работающим адаптивным макетом. Не неотзывчивый кодовый блок
Это совершенно неправильно понимает пункт меню Superfish, которое само начинается с «чистого CSS»; выпадающее меню и расширяет его.
0

.xpopdrop > ul {
        display: block!important;
}

И у тебя все будет хорошо.

30

Here's a better answer

Я смог преобразовать тот же HTML для Superfish в адаптивное меню ящика. JS очень прост, и все это в основном делается с использованием CSS. Проверьте это и дайте мне знать, что вы, ребята, думаете!

// 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>

Хороший пример. Обновил мой ответ для прямых пользователей здесь.
Можно ли использовать 3 слоя для меню вместо 2?

Похожие вопросы