菜单

3_项目/css/index.css

@@ -148,7 +148,46 @@
 .slide-menu{
     width: 260px;
     height: 596px;
-    background: purple;
+    /* background: purple; */
+    background: rgba(0,0,0,0.4);
     position: absolute;
     top:-50px;
+}
+.slide-menu-title{
+    height: 50px;
+    line-height: 50px;
+    background: #6F26BD ;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+}
+.slide-menu-list{
+    padding: 16px 7px 0 7px;
+    /* background: #0f0; */
+}
+.slide-list-left{
+    width:30px;
+    float: left;
+    text-align: center;
+    /* background: #00f; */
+    padding-top:20px;
+}
+.slide-list-right{
+    width: 216px;
+    /* background: #f00; */
+    float: left;
+    border-bottom: 1px solid #fff;
+}
+.slide-right-title{
+    margin-top:17px;
+    font-size: 16px;
+    font-weight: 400;
+    color:#fff;
+}
+.slide-right-list{
+    font-size: 13px;
+    color: #fff;
+    margin:10px 0 10px 0;
+
 }

3_项目/index.html

@@ -83,7 +83,63 @@
         <div class="commen-center slide-center ">
             <!-- 左侧菜单 -->
             <div class="slide-menu">
-                
+                <h2 class="slide-menu-title">全部商品分类</h2>
+                <ul class="slide-menu-list">
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                    <li class="slide-list">
+                        <div class="slide-list-left">
+                            <img src="images/icon1.png" alt="">
+                        </div>
+                        <div class="slide-list-right">
+                            <h3 class="slide-right-title">美容洗护</h3>
+                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
+                        </div>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>