PC端加入折叠菜单

app/index/view/base.html

@@ -43,6 +43,45 @@
                         </nav>-->
         </div>
         <div class="headIconContainer">
+            <!-- pc端菜单入口 -->
+            <div class="computerMenu">
+                <p id="computerMenuBot">
+                    <span id="computerMenuLink"></span>
+                </p>
+                <!-- pc端菜单 -->
+                <section class="pcMenuFixed">
+                    <div class="pcMenuItem">
+                        <a href="/index/user/order.html">
+                            <h2 class="menuItemTitle">Personal</h2>
+                        </a>
+                    </div>
+                    <div class="pcMenuItem">
+                        <a href="/index/index/aboutUs.html">
+                            <h2 class="menuItemTitle">About Us</h2>
+                        </a>
+                    </div>
+                    <div class="pcMenuItem">
+                        <a href="/index/index/privacyPolicy.html">
+                            <h2 class="menuItemTitle">Privacy Policy</h2>
+                        </a>
+                    </div>
+                    <div class="pcMenuItem">
+                        <a href="/index/index/salesTerms.html">
+                            <h2 class="menuItemTitle">Sales Terms</h2>
+                        </a>
+                    </div>
+                    <div class="pcMenuItem">
+                        <a href="/index/index/vapePoints.html">
+                            <h2 class="menuItemTitle">Vape Points</h2>
+                        </a>
+                    </div>
+                    <div class="pcMenuItem">
+                        <a href="/index/index/returnWarranty.html">
+                            <h2 class="menuItemTitle">Return & Warranty</h2>
+                        </a>
+                    </div>
+                </section>
+            </div>
             <!-- 购物车 -->
             <a href="/index/cart/shoppingCart.html">
                 <div class="headIconItem shoppingCartIcon">
@@ -60,6 +99,8 @@
                 </div>
             </a>
         </div>
+        <div id="pcMenuModel"></div>
+
     </div>
     <!-- 移动端头部 -->
     <div id="mobileEndHeader">
@@ -147,12 +188,12 @@
                     <p class="ltK">Free to contact our customer service through whatsapp now</p>
                     <a href="/index/user/order.html"><p class="ltV">Sign up for the Free Shipping Vapes</p></a>
                 </div>
-<!--                <div class="footerInuptBox">-->
-<!--                    <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">-->
-<!--                    <input class="footerInupt" type="text" placeholder="Subscribe To Our Newsletter">-->
-<!--                    <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="Subscribe Us"-->
-<!--                         id="subscribeArrow">-->
-<!--                </div>-->
+                <!--                <div class="footerInuptBox">-->
+                <!--                    <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">-->
+                <!--                    <input class="footerInupt" type="text" placeholder="Subscribe To Our Newsletter">-->
+                <!--                    <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="Subscribe Us"-->
+                <!--                         id="subscribeArrow">-->
+                <!--                </div>-->
                 <div class="fLinkContainer">
                     <div class="fLinkBox">
                         <h3 class="fLinkTitle">My Account<span>:</span></h3>

public/assets/index/css/common.css

@@ -86,6 +86,118 @@ a:active, a:focus {
     box-shadow: 0 .02rem .05rem rgba(0, 0, 0, .03);
 }
 
+.computerMenu{
+    position: relative;
+    margin-right: .06rem;
+    z-index: 10;
+}
+#computerMenuBot {
+    height: .3rem;
+    display: flex;
+    align-items: center;
+}
+
+#computerMenuLink {
+    display: block;
+    position: relative;
+    width: .3rem;
+    height: .04rem;
+    background-color: #666666;
+    border-radius: .06rem;
+}
+#computerMenuLink:before,
+#computerMenuLink:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: .06rem;
+    margin-top: .09rem;
+    position: absolute;
+    background: #666666;
+    -webkit-transition-property: margin, -webkit-transform;
+    transition-property: margin, -webkit-transform;
+    transition-property: margin, transform;
+    transition-property: margin, transform, -webkit-transform;
+    -webkit-transition-duration: 200ms;
+    transition-duration: 200ms;
+}
+
+#computerMenuLink:before {
+    margin-top: -.09rem;
+}
+
+#computerMenuLink:after {
+    margin-top: .09rem;
+}
+
+.open #computerMenuLink {
+    background: none
+}
+
+.open #computerMenuLink:before {
+    margin-top: 0;
+    transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+}
+
+.open #computerMenuLink:after {
+    margin-top: 0;
+    transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+}
+
+.open #computerMenuLink:before,
+.open #computerMenuLink:after {
+    background: #666666;
+}
+#pcMenuModel{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: -1;
+    background-color: transparent;
+    display: none;
+}
+.pcMenuFixed{
+    border-top: .01rem solid #dfdfdf;
+    position: absolute;
+    background: white;
+    border-radius: 0 0 .06rem .06rem;
+    min-width: 1.5rem;
+    max-width: 3rem;
+    padding: .12rem;
+    top: .5rem;
+    right: 0;
+    z-index: 999;
+    display: none;
+}
+.pcMenuItem{
+    border-bottom: .01rem solid #dfdfdf;
+}
+.pcMenuFixed .pcMenuItem:last-child{
+    border: none;
+}
+.pcMenuItem .menuItemTitle{
+    height: .4rem;
+    display: flex;
+    align-items: center;
+    font-size: .16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #434343;
+}
+.pcMenuItem.active .menuItemTitle{
+    color: rgba(79, 73, 222, 1);
+}
+
 .warnContainer {
     background-color: #434344;
     width: 100%;
@@ -133,6 +245,8 @@ a:active, a:focus {
     align-items: center;
     height: 100%;
     overflow: hidden;
+    position: relative;
+    z-index: 10;
 
 }
 

public/assets/index/js/public.js

@@ -4,6 +4,8 @@ $(document).ready(function () {
     const VAPES_TOKEN = "vapes_token"
     //菜单按钮
     const mobileMenuBot = $('#mobileMenuBot');
+    //pc菜单按钮
+    const computerMenuBot = $('#computerMenuBot');
     //触屏事件 || 点击事件
     const tap = "ontouchstart" in window ? "touchstart" : "click";
 
@@ -70,6 +72,25 @@ $(document).ready(function () {
     */
     mobileMenuBot.on('tap', starSlideToggle)
 
+    /**
+     *  pc端菜单展开收起
+     */
+    function computerManuToggle() {
+        $(".pcMenuFixed").stop().slideToggle(80);
+        $("#pcMenuModel").stop().slideToggle(0);
+        if (computerMenuBot.hasClass('open')) {
+            computerMenuBot.removeClass('open');
+        } else {
+            computerMenuBot.addClass('open');
+        }
+    }
+
+    /**
+     * pc端菜单绑定事件
+     */
+    computerMenuBot.on(tap, computerManuToggle)
+    $("#pcMenuModel").on(tap, computerManuToggle)
+
     ageReminderMethod()
     initMainHeight()
 })