Nav Walker для материализации css

Я пытаюсь создать тему WordPress с помощью материализованной структуры, но я действительно смущен навигационной частью. Я искал в Интернете, но ничего не нашел, кажется, никто не работает с материализацией.Nav Walker для материализации css

Единственное, что я нашел, это сделать его с помощью nav_walker, как это делается в bootstrap, но я не знаю, как это сделать с материализацией.

источник

2015-04-28 Scott Wolter

видеть эту ссылку https://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-2 -customization-colors-styles/ – vel

Уже запутался! :( –

Я создал фрагмент, который позволит вам создать навигационную панель для wordpress с помощью материала materializecss. Однако это не позволит вам создавать детей в меню (выпадающая панель). Для этого вам нужно создать настраиваемый навигатор.

Сниппает и инструкцию можно найти здесь: https://github.com/kristofferandreasen/wp_materialize_navigation

Он базируется на сайт о себе, связанном с в комментариях.

источник

2015-07-26 15:21:42 krillebimbim

Я знаю, что это старое сообщение, но это очень помогло мне. В примере кода инициализации jQuery есть проблема. Constrain_width следует изменить на constrainWidth (например, на верблюжьей кейсе и без подчеркивания) – grayson

Это должно сделать работу:

<div class="m-container nav"> 
    <div class="container"> 
     <nav id="site-navigation" class="main-navigation" role="navigation"> 
      <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 

      <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'menu side-nav', 'menu_id' => 'mobile-nav','items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',)); ?> 

      <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'hide-on-med-and-down')); ?> 

     </nav><!-- #site-navigation --> 
    <div class="clear"></div> 
</div>

(Источник: см навигационную часть этого здесь: https://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-1-theme-setup/)

источник

2015-08-05 12:43:02

Я сделал эту суть, страница index.php, где я использую WordPress меню , Я не считаю, что это лучшее решение, но это хороший старт и отлично работает. Не стесняйтесь улучшать и использовать его по своему усмотрению.

https://gist.github.com/knoonrx/a27381877cfc9e4826fae28ec2544490

<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title><?php bloginfo('name') ?></title> 
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css" media="screen,projection"> 
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css"> 

    <style> 
     nav .sub-menu { 
      position: absolute; 
      min-width: 115px; 
      display: none; 
      transition: all .3s; 
      background-color: #ee6e73; 
      z-index: 1; 
     } 
     nav .sub-menu li { 
      white-space: nowrap; 
      float: none; 
     } 
     li.menu-item-has-children:hover > .sub-menu { 
      display: block; 
     } 
    </style> 

</head> 
<header> 
    <nav id="site-navigation" class="main-navigation" role="navigation"> 
     <div class="nav-wrapper"> 
      <div class="container"> 
       <a href="#" class="brand-logo">Logo</a> 
       <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
       <?php 
       $menu = [ // mobile side menu array 
        'menu_class'  => 'menu side-nav', 
        'menu_id'  => 'mobile-nav', 
        'items_wrap'  => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>', 
       ]; 
       wp_nav_menu($menu); // mobile side menu 
       $menu = [ // desktop menu array 
        'menu_class' => 'right hide-on-med-and-down' 
       ]; 
       wp_nav_menu($menu); // desktop menu 
       ?> 
      </div> 

     </div> 
    </nav><!-- #site-navigation --> 
    <div class="clear"></div> 
</header> 

<br> 
<br> 

<body> 
<!--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="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".button-collapse").sideNav(); 
    }); 
</script> 
</body> 
</html>

Materialize CSS Wordpress Sub Menu

источник

2016-04-03 16:22:48

Это меню для материализованной работы действительно хороший TYVM –

Nav Walker для материализации css

ответ

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