как изменить ярлык в раскрывающемся списке при уменьшении размера?

0

Изображение 174551 привет. Я пытаюсь изменить макет своего экрана, когда мой большой экран переходит на маленький экран. Когда у меня есть большой экран, я показываю свой пункт меню на заголовке как ярлык, который я могу сделать. Но когда я уменьшаю размер экрана до ширины 600 пикселей. Мне нужно показать это при выпадающем меню.

как я это сделаю? Я ищу в google и нахожусь с помощью медиа-запроса, это возможно. Я пытаюсь реализовать это. но я получил событие, но как это возможно

вот мой код и изображения

http://codepen.io/anon/pen/LpGKYO

Изображение 174551

    #menubar li {
        display: inline;
        padding:0.5em;
        font-size:1.5em;
        color :red
    }
    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
#menubar{
  float:right;
  display: block;
  position:relative;
}

#menubarCont {
  width: 100%;
  float: right ;
  right:10em;
  position:relative;
}
  • 0
    Можете ли вы создать рабочую демо? В противном случае это не интересно, чтобы исправить это, чтобы помочь вам. Но да, это возможно, но вам нужно будет немного изменить разметку, потому что вы не можете преобразовать список в select.
  • 0
    Как насчет сохранения различных контейнеров для меню и воспроизведения их видимости с помощью Media Queries ?
Теги:
ionic-framework

2 ответа

1
Лучший ответ

Вам просто нужны медиа-запросы, чтобы скрыть меню, которое вы не хотите показывать. Вот простой пример: (изменить размер окна браузера для проверки)

.menu {
    width: 100%;
    height: 60px;
    background-color: orange;
}

@media screen and (max-width: 600px) {
    .large {
        display: none;
    }
}

@media screen and (min-width: 600px) {
    .small {
        display: none;
    }
}
<div class="menu">
    <div class="large">
        Large screen menu
    </div>
    <div class="small">
      <select>
        <option>menu item 1</option>
        <option>menu item 2</option>
      </select>
    </div>
</div>

И здесь тоже скрипка

Поделиться
  • 1
    Собирался набрать тот же ответ. Простое решение - просто включить оба кода и показать правильное в зависимости от медиа-запроса.
0

Просто бросаю мои два цента. Ответ от @Schlaus - это предпочтительный способ сделать это и способ, которым я тоже это сделаю. Вот ручка кода, которую я нашел, способ сделать это, не заставляя дважды программировать меню в разметке - это хорошая ссылка для тех, кому интересно другие альтернативные способы сделать это с помощью JQuery.

http://codepen.io/ericrasch/pen/GlBed

HTML

<nav> 

  <h1>This menu turns into a <code>&lt;select&gt;</code> when window is less than 960px to conserve space.</h1>

  <ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#books">Books</a></li> 
    <li><a href="#blog">Blog</a></li> 
    <li><a href="#about">About Us</a></li> 
    <li><a href="#support">Support</a></li> 
  </ul>

</nav>

CSS

* {
  margin: 0;
  padding: 0;
}

h1 {
  font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 500px;
  margin: 0 auto 15px;
}

nav {
  display: block;
  width: 960px;
  margin: 100px auto;
  text-align: center;
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: inline-block;
    background: #333;
    color: white;
    padding: 5px 15px;
    border: 1px solid white;
    text-decoration: none;
    &:hover {
      border: 1px solid red;
      background: red;
    }
    &:active {
      background: blue;
    }
  }
  select {
    display: none;
  }
}

@media (max-width: 960px) {
  nav {
    ul {
      display: none;
    }
    select {
      display: inline-block;
    }
  }
}

JQuery

// DOM ready
$(function() {

  // Create the dropdown base
  $("<select />").appendTo("nav");

  // Create default option "Go to..."
  $("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Go to..."
  }).appendTo("nav select");

  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
      "value"   : el.attr("href"),
      "text"    : el.text()
    }).appendTo("nav select");
  });

   // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
  $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

});

Надеюсь, это прояснит некоторые вещи для других и, надеюсь, поможет кому-то еще в будущем

ура

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню