admin

10_移动端/练习6_猫眼电影.html

@@ -11,6 +11,14 @@
         body{
             margin: 0;
         }
+        ul{
+            margin: 0;
+            padding: 0;
+        }
+        li{
+            list-style: none;
+        }
+
         .container header{
             width: 100%;
             height: 1rem;
@@ -32,6 +40,22 @@
             color: #fff;
             font-size: .5rem;
         }
+        .container .menu-list{
+            width: 2rem;
+            background-color: #fff;
+            box-shadow: 0 .06rem .18rem 0 rgba(0,0,0,.5);
+            position: absolute;
+            top: .9rem;
+            right: .9rem;
+        }
+        .container .menu-list li{
+            font-size: .3rem;
+            text-align: center;
+            height: 0.9rem;
+            line-height: .9rem;
+            color: #333;
+            border:1px solid #f0f0f0;
+        }
     </style>
 </head>
 
@@ -39,7 +63,15 @@
     <div class="container">
         <header>
             <span>猫眼电影</span>
-            <i class="iconfont icon-ego-menu"></i>
+            <i id="menu-btn" class="iconfont icon-ego-menu"></i>
+            <div class="menu-list" style="display: none;">
+                <ul>
+                    <li>首页</li>
+                    <li>影片</li>
+                    <li>影院</li>
+                    <li>商城</li>
+                </ul>
+            </div>
         </header>
         <nav></nav>
         <div class="content">
@@ -48,6 +80,18 @@
         </div>
         <footer></footer>
     </div>
+    <script>
+        let menuBtn = document.querySelector('#menu-btn');
+        let menuList = document.querySelector('.menu-list');
+        menuBtn.ontouchstart = function(){
+            let thisStata = menuList.style.display;
+            if(thisStata == 'none'){
+                menuList.style.display = 'block';
+            }else{
+                menuList.style.display = 'none';
+            }
+        }
+    </script>
 </body>
 
 </html>