MaterializeCSS NavBar и SideNav

Я создаю С.Б. администратора 2 типа страницы, на которой он имеет 2 плаваний, что выглядит следующим образом:MaterializeCSS NavBar и SideNav

А что я сделал до сих пор это:

Как вы можете видеть, боковая навигация распространяется в верхней панели. Мой код до сих пор это:

<!DOCTYPE html> 
<html> 
    <head> 
    <!--Import Google Icon Font--> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 

    <!--Let browser know website is optimized for mobile--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 

    <body> 

<div class="navbar-fixed"> 

<!-- Dropdown Structure --> 
<ul id="dropdown1" class="dropdown-content"> 
    <li><a href="#!">User Profile</a></li> 
    <li><a href="#!">Settings</a></li> 
    <li class="divider"></li> 
    <li><a href="#!">Logout</a></li> 
</ul> 
<nav class="light-blue lighten-1" role="navigation"> 
    <div class="nav-wrapper container"> 
    <a href="#!" class="brand-logo">Point of Sale</a> 
    <ul class="right hide-on-med-and-down"> 
     <!-- Dropdown Trigger --> 
     <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li> 
    </ul> 
    </div> 
</nav> 


</div> 

<ul id="slide-out" class="side-nav fixed"> 
    <li><a href="#!">First Sidebar Link</a></li> 
    <li><a href="#!">Second Sidebar Link</a></li> 
</ul> 

    <!--Import jQuery before materialize.js--> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="js/materialize.min.js"></script> 
    <script> 
     (function($){ 
     $(function(){ 

      $('.button-collapse').sideNav(); 

     }); // end of document ready 
     })(jQuery); // end of jQuery name space 
    </script> 
    </body> 
</html>

То, что я пытаюсь достичь этого:

Возможно ли это?

источник

2016-10-07 FewFlyBy

это также поможет https://stackoverflow.com/a/38125027/2130573 –

As the Side Nav documentations says:

Вы должны компенсировать свое содержание по ширине в боковом меню. так нравится этот

<style type="text/css"> 
.wrapper { 
    padding-left: 300px; 
} 
</style>

и обернуть свой код в обертке DIV

<div class="wrapper"> 

    <div class=""> 
     <!-- Dropdown Structure --> 
     <ul id="dropdown1" class="dropdown-content"> 
      <li><a href="#!">User Profile</a></li> 
      <li><a href="#!">Settings</a></li> 
      <li class="divider"></li> 
      <li><a href="#!">Logout</a></li> 
     </ul> 

     <nav class="light-blue lighten-1" role="navigation"> 
      <div class="nav-wrapper container"> 
       <a href="#!" class="brand-logo">Point of Sale</a> 
       <ul class="right hide-on-med-and-down"> 
        <!-- Dropdown Trigger --> 
        <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 

</div> 

<ul id="slide-out" class="side-nav fixed"> 
    <li><a href="#!">First Sidebar Link</a></li> 
    <li><a href="#!">Second Sidebar Link</a></li> 
</ul>

источник

2016-10-07 05:11:52 Anish

Привет, спасибо. Ум, глядя на мой обновленный пост? – FewFlyBy

@FewFlyBy да, вы можете это сделать, но вам нужно написать пользовательский css для этого макета ... 1. Переместить навигатор из тега обертки 2. увеличить z-index для navbar 3. и переместить слайд-навигацию сверху как navbar высота надеюсь, что это вам поможет .. – Anish

Вы должны попробовать:

<style type="text/css"> 
.side-nav{ 
    top: 65px; 
    width: 250px; 
} 
</style>

и обернуть свой код в заголовке и в сторону:

<header> 
<div class="navbar-fixed"> 

<!-- Dropdown Structure --> 
<ul id="dropdown1" class="dropdown-content"> 
    <li><a href="#!">User Profile</a></li> 
    <li><a href="#!">Settings</a></li> 
    <li class="divider"></li> 
    <li><a href="#!">Logout</a></li> 
</ul> 
<div class="nav-wrapper"> 
<nav class="light-blue lighten-1" role="navigation"> 
    <div class="nav-wrapper container"> 
    <a href="#!" class="brand-logo">Point of Sale</a> 
    <ul class="right hide-on-med-and-down"> 
     <!-- Dropdown Trigger --> 
     <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li> 
    </ul> 
    </div> 
</nav> 
</div> 
</div> 
</header> 

<aside> 
<ul id="slide-out" class="side-nav fixed"> 
    <li><a href="#!">First Sidebar Link</a></li> 
    <li><a href="#!">Second Sidebar Link</a></li> 
</ul> 
</aside>

источник

2017-08-08 00:22:31

MaterializeCSS re comends своей собственной модификации для этого:

header, main, footer { 
    padding-left: 300px; 
} 

@media only screen and (max-width : 992px) { 
    header, main, footer { 
    padding-left: 0; 
    } 
}

Reference here.

источник

2017-11-07 21:47:55

MaterializeCSS NavBar и SideNav

ответ

Смежные вопросы