|
|
|
|
|
|
|
|
|
| |
CSS code - ➕<style type="text/css"> /* Functionality */ /* Style */ </style> CSS codevButton code - ➕
<div id="{{ class }}nav">
<ul class="{{ class }}" id="{{ class }}"> <li><a href="#">{{ mom01 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b1sub1 }}</a></li> <li><a href="#">{{ b1sub2 }}</a></li> <li><a href="#">{{ b1sub3 }}</a></li> <li><a href="#">{{ b1sub4 }}</a></li> <li><a href="#">{{ b1sub5 }}</a></li> <li><a href="#">{{ b1sub6 }}</a></li> <li><a href="#">{{ b1sub7 }}</a></li> <li><a href="#">{{ b1sub8 }}</a></li> <li><a href="#">{{ b1sub9 }}</a></li> <li><a href="#">{{ b1sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom02 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b2sub1 }}</a></li> <li><a href="#">{{ b2sub2 }}</a></li> <li><a href="#">{{ b2sub3 }}</a></li> <li><a href="#">{{ b2sub4 }}</a></li> <li><a href="#">{{ b2sub5 }}</a></li> <li><a href="#">{{ b2sub6 }}</a></li> <li><a href="#">{{ b2sub7 }}</a></li> <li><a href="#">{{ b2sub8 }}</a></li> <li><a href="#">{{ b2sub9 }}</a></li> <li><a href="#">{{ b2sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom03 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b3sub1 }}</a></li> <li><a href="#">{{ b3sub2 }}</a></li> <li><a href="#">{{ b3sub3 }}</a></li> <li><a href="#">{{ b3sub4 }}</a></li> <li><a href="#">{{ b3sub5 }}</a></li> <li><a href="#">{{ b3sub6 }}</a></li> <li><a href="#">{{ b3sub7 }}</a></li> <li><a href="#">{{ b3sub8 }}</a></li> <li><a href="#">{{ b3sub9 }}</a></li> <li><a href="#">{{ b3sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom04 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b4sub1 }}</a></li> <li><a href="#">{{ b4sub2 }}</a></li> <li><a href="#">{{ b4sub3 }}</a></li> <li><a href="#">{{ b4sub4 }}</a></li> <li><a href="#">{{ b4sub5 }}</a></li> <li><a href="#">{{ b4sub6 }}</a></li> <li><a href="#">{{ b4sub7 }}</a></li> <li><a href="#">{{ b4sub8 }}</a></li> <li><a href="#">{{ b4sub9 }}</a></li> <li><a href="#">{{ b4sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom05 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b5sub1 }}</a></li> <li><a href="#">{{ b5sub2 }}</a></li> <li><a href="#">{{ b5sub3 }}</a></li> <li><a href="#">{{ b5sub4 }}</a></li> <li><a href="#">{{ b5sub5 }}</a></li> <li><a href="#">{{ b5sub6 }}</a></li> <li><a href="#">{{ b5sub7 }}</a></li> <li><a href="#">{{ b5sub8 }}</a></li> <li><a href="#">{{ b5sub9 }}</a></li> <li><a href="#">{{ b5sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom06 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b6sub1 }}</a></li> <li><a href="#">{{ b6sub2 }}</a></li> <li><a href="#">{{ b6sub3 }}</a></li> <li><a href="#">{{ b6sub4 }}</a></li> <li><a href="#">{{ b6sub5 }}</a></li> <li><a href="#">{{ b6sub6 }}</a></li> <li><a href="#">{{ b6sub7 }}</a></li> <li><a href="#">{{ b6sub8 }}</a></li> <li><a href="#">{{ b6sub9 }}</a></li> <li><a href="#">{{ b6sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom07 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b7sub1 }}</a></li> <li><a href="#">{{ b7sub2 }}</a></li> <li><a href="#">{{ b7sub3 }}</a></li> <li><a href="#">{{ b7sub4 }}</a></li> <li><a href="#">{{ b7sub5 }}</a></li> <li><a href="#">{{ b7sub6 }}</a></li> <li><a href="#">{{ b7sub7 }}</a></li> <li><a href="#">{{ b7sub8 }}</a></li> <li><a href="#">{{ b7sub9 }}</a></li> <li><a href="#">{{ b7sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom08 }}</a> <ul class="{{ class }}d"> <li><a href="#">{{ b8sub1 }}</a></li> <li><a href="#">{{ b8sub2 }}</a></li> <li><a href="#">{{ b8sub3 }}</a></li> <li><a href="#">{{ b8sub4 }}</a></li> <li><a href="#">{{ b8sub5 }}</a></li> <li><a href="#">{{ b8sub6 }}</a></li> <li><a href="#">{{ b8sub7 }}</a></li> <li><a href="#">{{ b8sub8 }}</a></li> <li><a href="#">{{ b8sub9 }}</a></li> <li><a href="#">{{ b8sub10 }}</a></li> </ul> </li> </ul> </div> <br /> Button codeSlick Menu -NOTE: This will only work if your class is "menu"!!!!!Red in the head, blue at the bottom. You need this directory and files: navworks.zip ➕ <meta name="viewport" content="width=device-width"> ➕ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Slick MenuAmp Menu -
Goes in the HEAD➕
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> <style amp-custom> amp-sidebar {color:#fff;font-family:sans-serif;line-height:20px;} amp-sidebar a{color:#fff;text-decoration:none;line-height:16px;} amp-sidebar a:hover{color:#eee} amp-sidebar { background-color:{{ RestVisitedbg }}; color:{{RestVisitedtext}}; width: 250px; padding-right: 10px; } .amp-sidebar-image { line-height: 100px; vertical-align:middle; } .amp-close-image { top: 15px; left: 225px; cursor: pointer; } #sidebar li { margin-bottom: 20px; list-style: none; } button { margin-left: 20px; } .toggle { background-color: {{ RestVisitedbg }}; padding-left:6px; padding-right:6px; padding-top:3px; padding-bottom:3px; color: {{ RestVisitedtext }}; border:1px solid #000; background-image: url(images/button_bg.jpg); } .toggle:hover { color:{{ hovertext }}; background-color: {{ hoverbg }}; border:1px solid #000000; background-image: url(images/button_bg_over.jpg); } </style> Goes where you want your hamburger (header, perhaps?)➕
<button class="toggle" on='tap:sidebar.toggle'>MENU</button>
Goes after the closing body tag➕
<!-- begin Side Nav -->
<amp-sidebar id='sidebar' layout="nodisplay" side="right"> <amp-img class='amp-close-image' src="http://mooseloose.com/images/moose.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0"></amp-img> <ul> <li><a href="#">{{ mom01 }}</a> <ul> <li><a href="#">{{ b1sub1 }}</a></li> <li><a href="#">{{ b1sub2 }}</a></li> <li><a href="#">{{ b1sub3 }}</a></li> <li><a href="#">{{ b1sub4 }}</a></li> <li><a href="#">{{ b1sub5 }}</a></li> <li><a href="#">{{ b1sub6 }}</a></li> <li><a href="#">{{ b1sub7 }}</a></li> <li><a href="#">{{ b1sub8 }}</a></li> <li><a href="#">{{ b1sub9 }}</a></li> <li><a href="#">{{ b1sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom02 }}</a> <ul> <li><a href="#">{{ b2sub1 }}</a></li> <li><a href="#">{{ b2sub2 }}</a></li> <li><a href="#">{{ b2sub3 }}</a></li> <li><a href="#">{{ b2sub4 }}</a></li> <li><a href="#">{{ b2sub5 }}</a></li> <li><a href="#">{{ b2sub6 }}</a></li> <li><a href="#">{{ b2sub7 }}</a></li> <li><a href="#">{{ b2sub8 }}</a></li> <li><a href="#">{{ b2sub9 }}</a></li> <li><a href="#">{{ b2sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom03 }}</a> <ul> <li><a href="#">{{ b3sub1 }}</a></li> <li><a href="#">{{ b3sub2 }}</a></li> <li><a href="#">{{ b3sub3 }}</a></li> <li><a href="#">{{ b3sub4 }}</a></li> <li><a href="#">{{ b3sub5 }}</a></li> <li><a href="#">{{ b3sub6 }}</a></li> <li><a href="#">{{ b3sub7 }}</a></li> <li><a href="#">{{ b3sub8 }}</a></li> <li><a href="#">{{ b3sub9 }}</a></li> <li><a href="#">{{ b3sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom04 }}</a> <ul> <li><a href="#">{{ b4sub1 }}</a></li> <li><a href="#">{{ b4sub2 }}</a></li> <li><a href="#">{{ b4sub3 }}</a></li> <li><a href="#">{{ b4sub4 }}</a></li> <li><a href="#">{{ b4sub5 }}</a></li> <li><a href="#">{{ b4sub6 }}</a></li> <li><a href="#">{{ b4sub7 }}</a></li> <li><a href="#">{{ b4sub8 }}</a></li> <li><a href="#">{{ b4sub9 }}</a></li> <li><a href="#">{{ b4sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom05 }}</a> <ul> <li><a href="#">{{ b5sub1 }}</a></li> <li><a href="#">{{ b5sub2 }}</a></li> <li><a href="#">{{ b5sub3 }}</a></li> <li><a href="#">{{ b5sub4 }}</a></li> <li><a href="#">{{ b5sub5 }}</a></li> <li><a href="#">{{ b5sub6 }}</a></li> <li><a href="#">{{ b5sub7 }}</a></li> <li><a href="#">{{ b5sub8 }}</a></li> <li><a href="#">{{ b5sub9 }}</a></li> <li><a href="#">{{ b5sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom06 }}</a> <ul> <li><a href="#">{{ b6sub1 }}</a></li> <li><a href="#">{{ b6sub2 }}</a></li> <li><a href="#">{{ b6sub3 }}</a></li> <li><a href="#">{{ b6sub4 }}</a></li> <li><a href="#">{{ b6sub5 }}</a></li> <li><a href="#">{{ b6sub6 }}</a></li> <li><a href="#">{{ b6sub7 }}</a></li> <li><a href="#">{{ b6sub8 }}</a></li> <li><a href="#">{{ b6sub9 }}</a></li> <li><a href="#">{{ b6sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom07 }}</a> <ul> <li><a href="#">{{ b7sub1 }}</a></li> <li><a href="#">{{ b7sub2 }}</a></li> <li><a href="#">{{ b7sub3 }}</a></li> <li><a href="#">{{ b7sub4 }}</a></li> <li><a href="#">{{ b7sub5 }}</a></li> <li><a href="#">{{ b7sub6 }}</a></li> <li><a href="#">{{ b7sub7 }}</a></li> <li><a href="#">{{ b7sub8 }}</a></li> <li><a href="#">{{ b7sub9 }}</a></li> <li><a href="#">{{ b7sub10 }}</a></li> </ul> </li> <li><a href="#">{{ mom08 }}</a> <ul> <li><a href="#">{{ b8sub1 }}</a></li> <li><a href="#">{{ b8sub2 }}</a></li> <li><a href="#">{{ b8sub3 }}</a></li> <li><a href="#">{{ b8sub4 }}</a></li> <li><a href="#">{{ b8sub5 }}</a></li> <li><a href="#">{{ b8sub6 }}</a></li> <li><a href="#">{{ b8sub7 }}</a></li> <li><a href="#">{{ b8sub8 }}</a></li> <li><a href="#">{{ b8sub9 }}</a></li> <li><a href="#">{{ b8sub10 }}</a></li> </ul> </li> </ul> </amp-sidebar> <!-- End Side Nav --> Amp MenuCSS code - ➕<style type="text/css"> /* Functionality */
/* Style */ </style> CSS codeh |