Легкий скрипт для создания адаптивных меню?

Question

[Erling]

Надоело писать на каждую верстку какие-то велосипеды под адаптивную версию страницы. Ищу удобное и легковстраиваемое решение для навигационного меню, чтобы в мобильных разрешениях меню скрывалось, появлялась иконка, при клике на которую появлялось меню, и обратно.

html-структура меню следующая:

<ul>
  <li><a></li>
  <li><a></li>
  <li><a></li>
</ul>

В случае с бутстрап использую его возможности, а на кастомные верстки пока ничего не нашел удобного. Подскажите. Спасибо!

Answer 1

[rinatoptimus]

Трай this.

Answer 2

[iBird Rose]

а что мешает один раз сделать красиво и универсально по возможности - залить на гист и пользоваться?

Answer 3

[Neocaridina]

Вчера как раз искал.
Почитал тут, сделал так.
Ультра лайт, имхо

Comments

[Erling]

Ваш сайдбар скрывается и всё. Не вижу никакого меню в FF на низких разрешениях.

[Neocaridina]

Чтобы ресайзило на лету надо кнопку выводить через css. Я там просто захотел абсолютно нулевое вмешательство в html.

Answer 4

[Максим]

<style>
  #on {display:none;}
      @media screen and (max-width: 640px) {
      #box {display:none;}
      #on {display:block;}
      }
  </style>

<a href="#" id="on" onclick="openbox('box'); return false">menu</a>
     <div id="box">
     <ul>

  <li><a>123</li>
  <li><a>123</li>
  <li><a>123</li>
  
</ul>
</div>

<script type="text/javascript">

function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}
</script>

что-то типа того

Comments

[Neocaridina]

Попробовал.
С первого клика по меню ничего не происходит. Второй и следующие - ок.
Почему так?

[Максим]

поколдовать тут: function openbox(id)

[Neocaridina]

Ну блин понятно что не в верстке.
Умел бы колдовать - не сидел бы в топиках по таким костылям.