Что случилось с w3-sidenav?Можно ли вместо этого использовать w3-sidebar без недостатков? - PullRequest
Новая
       15

Что случилось с w3-sidenav?Можно ли вместо этого использовать w3-sidebar без недостатков?

0 голосов
/ 12 октября 2018

Что случилось с w3-sidenav?Теперь у нас есть только w3-sidebar, что не так хорошо, как всегда отображается на больших компьютерах (ноутбуках, настольных компьютерах).

Можно ли использовать w3-sidebar, но избежать постоянной проблемы длябольшие экраны?Я хочу, чтобы это было видно только тогда, когда я говорю.

1 Ответ

0 голосов
/ 15 января 2019

В руководствах по w3 предлагается использовать class = "w3-sidebar w3-bar-block" для создания боковой навигации.Вы можете по-разному всегда показывать и т. Д .:

1) Всегда отображать: Добавить стиль = "ширина = 25%", а затем в соседний элемент div добавить стиль = "margin-left": 25% "

2) Открыть поверх содержимого: a) добавить к боковой панели style="display:none" id="mySideBar" <button onClick="we-close" class="w3-bar-iitem w3-large">Close &times; </button>

b) Добавить к содержимому (смежный раздел): <button class="w3-button w3-large" onClick="W3-open()">&#9776; </button>

в) Добавить скрипт 

function w3-open(){ 
      document.getElementById("mySideBar").style.display="block";
   }
   function w3-close(){
      document.getElementById("mySideBar").style.display="none";
   }

Еще один вариант - открыть боковую панель на всей странице, и в этом случае вы будете использовать тот же код, что и в варианте 2 выше, просто добавьте кJS w3-open () функция: document.getElementById("mySideBar").style.width="100%";

3) Разборная и адаптивная: (я думаю, это то, что вы, вероятно, предпочтете): a) Определите div на боковой панели с помощью 

class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width: 200px" id="mySideBar">
    <button class="w3-bar-item w3-button w3-large we-hide-large" onClick="w3-close()">close &times; </button>

b) Определите основной div-обертку с помощью 

    <div class="w3-main" style="margin-left:200px"> 
       <div class="w3-blue"> 
         <button class="w3-button …." onClick="w3-open()"> &#9776; </button> 
       </div> 
   </div>

c) вставьте JavaScript в соответствии с описанным выше вариантом 2, оба w3-open () и w3-close ()

Не цитируйте мой код выше, я просто набрал его от руки, поэтому он, вероятно, пронизан ошибками.

Вот скрипт w3schoolдля варианта 3

Подробнее о боковых панелях вы можете прочитать здесь.

...