电脑端和手机端不同菜单如何制作drupal 模板呢?
发布于
下面代码是在不同终端显示不同的内容,比如:电脑端会显示
<nav class="header-nav-menu">
<ul class="menu nav-menu">
(显示的内容相同)
</ul>
</nav>
手机端会显示:
<nav class="header-nav-menu-mobile">
<div class="container-fluid">
<ul class="menu nav-menu menu-mobile">
(显示的内容相同)
</ul>
</div>
</nav>
我的info.yml文件为:
regions:
header: 'Header头部'
navigation_desktop: 'Desktop Navigation PC'
navigation_mobile: 'Navigationr mobile'
sub_banner: 'sub banner'
nav_main: 'sub nav'
breadcrumb: Breadcrumbs
content: 'Main content'
footer: 'Footer'
请问 menu.html.twig文件如果写呢?有没有更方便的方法呢?
我的page.html.twig文件内容为:
<header id="header">
<div class="header header-1 d-none d-lg-block js-header-1">
<div class="header__bar">
<div class="wrap wrap--w1790">
<div class="container-fluid">
<div class="header__content">
<div class="logo">
<a href="#">
<img src="images/icon/logo-black.png" alt="Tatee" />
</a>
</div>
<div class="header__content-right">
{% if page.navigation_desktop %}
{{ page.navigation_desktop }}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-mobile d-block d-lg-none">
<div class="header-mobile__bar">
<div class="container-fluid">
<div class="header-mobile__bar-inner">
<a class="logo" href="index.html">
<img src="images/icon/logo-black.png" alt="Tatee" />
</a>
<button class="hamburger hamburger--slider float-right" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<nav class="header-nav-menu-mobile">
<div class="container-fluid">
{% if page.navigation_mobile %}
{{ page.navigation_mobile }}
{% endif %}
</div>
</nav>
</div>
</header>
静态页面如下:
<header id="header">
<div class="header header-1 d-none d-lg-block js-header-1">
<div class="header__bar">
<div class="wrap wrap--w1790">
<div class="container-fluid">
<div class="header__content">
<div class="header__content-right">
<nav class="header-nav-menu">
<ul class="menu nav-menu">
<li class="menu-item menu-item-has-children">
<a href="home-main.html">Home</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="home-main.html">Main home</a>
</li>
<li class="menu-item">
<a href="home-project-hover.html">Project Hover</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="about-us.html">about</a>
</li>
<li class="menu-item">
<a href="contact.html">contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-mobile d-block d-lg-none">
<div class="header-mobile__bar">
<div class="container-fluid">
<div class="header-mobile__bar-inner">
<button class="hamburger hamburger--slider float-right" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<nav class="header-nav-menu-mobile">
<div class="container-fluid">
<ul class="menu nav-menu menu-mobile">
<li class="menu-item menu-item-has-children">
<a href="home-main.html">Home</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="home-main.html">Main home</a>
</li>
<li class="menu-item">
<a href="home-project-hover.html">Project Hover</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="about-us.html">about</a>
</li>
<li class="menu-item">
<a href="contact.html">contact</a>
</li>
</ul>
</div>
</nav>
</div>
</header>