这里是文章模块栏目内容页
- 网站首页
- 技术文章
- JavaScript
- materialize实现移动端侧滑菜单 宽屏左侧菜单互相切换
要实现一个后台左侧导航菜单宽屏时，菜单在左侧，移动时，菜单在左上角，点开侧滑的效果。
Materialize 这个框架完全具备这个功能。下面 就用它来实现。
/*!
* Materialize v1.0.0 (http://materializecss.com)
* Copyright 2014-2017 Materialize
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/
下面是html的结构
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title> <tmpl_var title> </title>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE,chrome=1" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="generator" content="" />
<meta name="description" content=" " />
<link rel="stylesheet" type="text/css" href="styles/materialize.css" />
</head>
<body class="">
<div id="root">
<nav>
<div class="nav-wrapper">
<span class="logo brand-logo ">
<a href="index.php" tabindex="-1" title="">
<img src='logo.png' tabindex="3" alt="" />
</a>
</span>
<ul class="right hide-on-med-and-down">
<li role="menuitem" class=""><a title="管理" id="topmenu-coreadminhome"
href="index.php?module=CoreAdminHome&action=home&idSite=1&period=day&date=yesterday"
target="_self" tabindex="3"><span class="navbar-icon icon-settings"
aria-label="管理"></span></a></li>
<li role="menuitem" class=""><a title="退出" id="topmenu-login"
href="index.php?module=Login&action=logout&period=day&date=yesterday" target="_self"
tabindex="3"><span class="navbar-icon icon-sign-out" aria-label="退出"></span></a></li>
</ul>
<!-- 点击的时候添加style transform: translateX(0%); 展开小屏幕时候的菜单 -->
<ul class="sidenav hide-on-large-only right-aligned" id="mobile-top-menu" style="">
<li role="menuitem" class=""> <a title="管理" id="topmenu-coreadminhome"
href="index.php?module=CoreAdminHome&action=home&idSite=1&period=day&date=yesterday"
target="_self" tabindex="3"> 管理
</a>
</li>
<li role="menuitem" class=""> <a title="退出" id="topmenu-login"
href="index.php?module=Login&action=logout&period=day&date=yesterday" target="_self"
tabindex="3"> 退出
</a>
</li>
</ul>
<!-- 这个地方是移动窄屏幕是顶部，左右两边展开菜单的按钮-->
<a href="javascript:;" data-target="mobile-left-menu"
class="activateLeftMenu hide-on-large-only button-collapse sidenav-trigger" style=" "><span
class="icon-menu-hamburger"></span></a>
<a href="javascript:;" data-target="mobile-top-menu"
class="activateTopMenu hide-on-large-only button-collapse sidenav-trigger"><span
class="icon-more-verti"></span></a>
</div>
</nav>
<div class="top_controls" style="min-height: 5px;"></div>
<!-- 中间的消息间隔带 -->
<div class="page">
<div id="secondNavBar" class="Menu--dashboard z-depth-1">
<div class="reportingMenu ng-isolate-scope" piwik-reporting-menu="">
<ul class="navbar hide-on-med-and-down" role="menu" aria-label="主导航">
<!-- ngRepeat: category in menuModel.menu -->
<li class="menuTab ng-scope active" role="menuitem" >
<a class="item ng-binding" tabindex="5" href="" >
<span class="menu-icon icon-reporting-dashboard"></span>概况
<span class="hidden ng-binding">
菜单
</span>
</a>
<ul role="menu">
<li role="menuitem" class="ng-scope active">
<a class="item" href="/manage.tmpl">
Torrent
</a>
</li>
<li role="menuitem" class="ng-scope">
<a class="item" href="trackerweb">
Tracker
</a>
</li>
<li role="menuitem" class="ng-scope">
<a class="item" href="/html/index.tmpl">
上传文件<tmpl_var uploadfile>
</a>
</li>
<li role="menuitem" class="ng-scope">
<a class="item" href="/html/share.tmpl">
文件共享 <tmpl_var fileshareTile>
</a>
</li>
</ul>
</li><!-- end ngRepeat: category in menuModel.menu -->
<li ng-repeat="category in menuModel.menu" class="menuTab ng-scope" role="menuitem"
ng-class="{'active': category.active}" style="">
<a class="item ng-binding" tabindex="5" href="" ng-click="loadCategory(category)">
<span class="menu-icon icon-sign-in"></span>来路分析
<span class="hidden ng-binding">
菜单
</span>
</a>
<ul role="menu">
<!-- ngRepeat: subcategory in category.subcategories -->
<li role="menuitem"
class="ng-scope">
<!-- ngIf: subcategory.isGroup -->
<!-- ngIf: !subcategory.isGroup --><a ng-if="!subcategory.isGroup"
ng-href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_Overview"
class="item ng-binding ng-scope" ng-click="loadSubcategory(category, subcategory)"
href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_Overview">
来路概览
</a><!-- end ngIf: !subcategory.isGroup -->
<!-- ngIf: subcategory.help -->
</li><!-- end ngRepeat: subcategory in category.subcategories -->
<li role="menuitem"
class="ng-scope">
<!-- ngIf: subcategory.isGroup -->
<!-- ngIf: !subcategory.isGroup --><a ng-if="!subcategory.isGroup"
ng-href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_KeywordsSearch"
class="item ng-binding ng-scope" ng-click="loadSubcategory(category, subcategory)"
href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_KeywordsSearch">
关键词
</a><!-- end ngIf: !subcategory.isGroup -->
<!-- ngIf: subcategory.help -->
</li><!-- end ngRepeat: subcategory in category.subcategories -->
<li role="menuitem"
class="ng-scope">
<!-- ngIf: subcategory.isGroup -->
<!-- ngIf: !subcategory.isGroup --><a ng-if="!subcategory.isGroup"
ng-href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_SearchEngine"
class="item ng-binding ng-scope" ng-click="loadSubcategory(category, subcategory)"
href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_SearchEngine">
搜索引擎
</a><!-- end ngIf: !subcategory.isGroup -->
<!-- ngIf: subcategory.help -->
</li><!-- end ngRepeat: subcategory in category.subcategories -->
<li role="menuitem"
class="ng-scope">
<!-- ngIf: subcategory.isGroup -->
<!-- ngIf: !subcategory.isGroup --><a ng-if="!subcategory.isGroup"
ng-href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_ExternalLinks"
class="item ng-binding ng-scope" ng-click="loadSubcategory(category, subcategory)"
href="#?idSite=1&period=day&date=yesterday&segment=&category=ReferrerAnalytics_Referrer&subcategory=ReferrerAnalytics_ExternalLinks">
外部链接
</a><!-- end ngIf: !subcategory.isGroup -->
<!-- ngIf: subcategory.help -->
</li><!-- end ngRepeat: subcategory in category.subcategories -->
</ul>
</li><!-- end ngRepeat: category in menuModel.menu -->
</ul>
<!--这里是移动时的侧滑菜单-->
<ul id="mobile-left-menu" class="sidenav hide-on-large-only" style="transform: translateX(-105%);">
<li class="no-padding ng-scope" style="">
<ul class="collapsible collapsible-accordion" piwik-side-nav="nav .activateLeftMenu">
<li class="active">
<a class="collapsible-header " tabindex="0"><i class="icon-reporting-dashboard"></i>概况</a>
<div class="collapsible-body" style="display: block;">
<ul>
<li class="ng-scope">
<a class="ng-binding ng-scope" href=" ">概况</a>
</li>
<li class="ng-scope">
<a class="ng-binding ng-scope" href="">实时</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding ng-scope">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header ng-binding" tabindex="0"><i class="icon-sign-in"></i>来路分析</a>
<div class="collapsible-body">
<ul>
<li class="ng-scope">
<a class="ng-binding ng-scope" href=" ">来路概览</a>
</li>
<li class="ng-scope">
<a class="ng-binding ng-scope" href=" ">关键词</a>
</li>
<li class="ng-scope">
<a class="ng-binding ng-scope" href=" ">搜索引擎</a>
</li>
<li class="ng-scope">
<a class="ng-binding ng-scope" href=" ">外部链接</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pageWrap">
<div id="content">
</div>
</div>
</div>
</div><!--#root end-->
<script src="js/jquery-3.4.1.min.js"> </script>
<script src="styles/materialize.min.js"> </script>
<script>
$(document).ready(function () {
$("#mobile-left-menu").sidenav({
closeOnClick: true
});
$("#mobile-top-menu").sidenav({
closeOnClick: true,
edge: 'right'
});
});
</script>
</body>
</html>通过sidenav 组件，既可以实现 导航菜单的切换，同时 materialize.Css 也附带了 css判断屏幕宽度，显示左侧菜单还是顶部侧滑菜单，非常方便。这里记录 一下，以后用到即可方便。
好了，本文内容全部结束，感谢您的阅读，希望对您有所帮助。
相关内容
实用工具： JSON字符串格式化 | js压缩代码格式化工具 | 异步XMLHttpRequests库axios.js文档 | vue-axios文档 | Go语言文档
Powered by Xunruicms 4.3.10 2009-2024 ©Â Xunruicms Inc.
桂ICP备12001377号