кнопка показа вместо строки меню при изменении размера браузера в css / html

Question

кнопка показа вместо строки меню при изменении размера браузера в css / html

0

У меня есть меню навигации на моей веб-странице, и я хочу показать кнопку вместо этой панели меню, когда размер браузера ниже определенного уровня (ниже некоторого размера) И наоборот. Мне нужен код. как это работает? Это чистый CSS или мне нужно применить любой java-скрипт/код

вот пример веб-страницы Пример сайта

выше пример страницы. если u изменит размер браузера (примерно половина), u отобразит кнопку меню в правом верхнем углу. и если u максимизирует его, он исчезнет и отобразит вместо него строку меню (кнопка меню)

Arun CM 06 окт. 2013, в 19:37

Источник

2

Не совсем понятно, о чем ты спрашиваешь. Кроме того, опубликуйте здесь соответствующий HTML / CSS / JS, демонстрирующий конкретную проблему.
Josh Crozier 06 окт. 2013, в 16:59
0

Вы спрашиваете об отзывчивом?
Tamil Selvan C 06 окт. 2013, в 17:00
0

Используйте @media (max-width: 600px) {...}, и jquery необходим для замены элементов меню / списка на кнопки.
Sagar Guhe 06 окт. 2013, в 17:05
0

@JoshC, когда ширина браузера достигает 400px (например), мне нужно показать меню кнопок вместо длинных строк меню, а размер браузера больше 400px, я хочу показать строку меню. кнопка означает кнопку меню (со всеми параметрами строки меню)
Arun CM 06 окт. 2013, в 17:09
0

@TamilSelvan, сэр, я не знаю, что реагирует? или нет, я очень плохо знаком с HTML и CSS. что отзывчиво?
Arun CM 06 окт. 2013, в 17:10
0

@SagarGuhe Можете ли вы дать мне код? и можно ли сделать это без Jquery или Javascript
Arun CM 06 окт. 2013, в 17:11
0

@ WeAreCop11 Google для адаптивного веб-дизайна
vishalkin 06 окт. 2013, в 17:12
0

Responsive - это веб-дизайн, адаптирующийся к размеру браузера. Вы говорите только об отзывчивом.
Sagar Guhe 06 окт. 2013, в 17:12
0

вряд ли это возможно без jquery, я думаю, что я дам время, пока я пытаюсь создать фрагмент кода.
Sagar Guhe 06 окт. 2013, в 17:15
0

@SagarGuhe это пример страницы dotnet-tricks.com, если вы измените размер браузера, то увидите кнопку меню в верхнем правом углу. и если вы максимизируете, он исчезнет и покажет вместо этого munu-бар
Arun CM 06 окт. 2013, в 17:25
0

Я получил ответ: просто используйте @media
Arun CM 18 окт. 2013, в 09:10
0

<style type = "text / css"> li {float: left; Левое поле: 10px; } @media (min-width: 768px) {#btn {display: none; }} (at) media (max-width: 766px) {#menu {display: none; }}
Arun CM 18 окт. 2013, в 09:14

Показать ещё 10 комментариев

Теги:

html

css

html5

css3

2 ответа

0

Эти учебные пособия помогут вам узнать о гибком проектировании, а также получить меню так, как вы хотите. Ссылка

вежливость: Coder Guide

vishalkin 06 окт. 2013, в 15:30

Ещё вопросы

Не совсем понятно, о чем ты спрашиваешь. Кроме того, опубликуйте здесь соответствующий HTML / CSS / JS, демонстрирующий конкретную проблему.
Используйте @media (max-width: 600px) {...}, и jquery необходим для замены элементов меню / списка на кнопки.
@JoshC, когда ширина браузера достигает 400px (например), мне нужно показать меню кнопок вместо длинных строк меню, а размер браузера больше 400px, я хочу показать строку меню. кнопка означает кнопку меню (со всеми параметрами строки меню)
@TamilSelvan, сэр, я не знаю, что реагирует? или нет, я очень плохо знаком с HTML и CSS. что отзывчиво?
@SagarGuhe Можете ли вы дать мне код? и можно ли сделать это без Jquery или Javascript
@ WeAreCop11 Google для адаптивного веб-дизайна
Responsive - это веб-дизайн, адаптирующийся к размеру браузера. Вы говорите только об отзывчивом.
вряд ли это возможно без jquery, я думаю, что я дам время, пока я пытаюсь создать фрагмент кода.
@SagarGuhe это пример страницы dotnet-tricks.com, если вы измените размер браузера, то увидите кнопку меню в верхнем правом углу. и если вы максимизируете, он исчезнет и покажет вместо этого munu-бар
Я получил ответ: просто используйте @media
<style type = "text / css"> li {float: left; Левое поле: 10px; } @media (min-width: 768px) {#btn {display: none; }} (at) media (max-width: 766px) {#menu {display: none; }}

Sagar Guhe · Accepted Answer · 2013-10-06T15-33-00.000Z

Вот решение вашей проблемы.

Демо: любезность Osvaldas dot info

спасибо Сагар Гух, это то, что я ожидаю ... большое спасибо