修改侧栏菜单结构和动画

admin-articlelist.html

@@ -17,9 +17,10 @@
 <div class="headerWrapper"></div>
 <div class="wrapper">
   <div class="leftWrapper">
-    <div class="leftContent">
+    <a class="leftBtn iconImg icon-"></a>
+    <div class="leftContent" id="leftContent">
       <div class="logo logoGw">
-        <h2>官<span class="logoInfo">网后台</span><span class="caret"></span></h2>
+        <h2>官网后台</h2>
         <div class="logoList">
           <ul>
             <li><a href="#">文库</a></li>
@@ -39,7 +40,13 @@
         <h2 class="subMenuTitle"><a href="admin-producelist.html"><i class="iconImg icon-">H</i><div class="subMenuText">产品</div></a></h2>
       </div>
       <div class="subMenu">
-        <h2 class="subMenuTitle"><a href="admin-videolist.html"><i class="iconImg icon-">J</i><div class="subMenuText">动画教程</div></a></h2>
+        <h2 class="subMenuTitle"><a href="#"><i class="iconImg icon-">J</i><div class="subMenuText">视频教程<span class="caret"></span></div></a></h2>
+        <div class="subMenuContent">
+          <ul>
+            <li><a href="admin-videolist.html">教程列表</a></li>
+            <li><a href="admin-cartoonlist.html">视频库</a></li>
+          </ul>
+        </div>
       </div>
       <div class="subMenu">
         <h2 class="subMenuTitle"><a href="admin-columnlist.html"><i class="iconImg icon-">F</i><div class="subMenuText">栏目设置</div></a></h2>

css/style.css

@@ -156,14 +156,40 @@ table {
 .wrapper{
   overflow-x:hidden;
 }
-.leftWrapper{
+.leftBtn{
+  position: absolute;
+  left:45px;
+  color: #2c3e50;
+  cursor: pointer;
+  transition: 0.5s all;
+}
+.leftBtn:hover{
+  text-decoration: none;
+  color: #337ab7;
+}
+.leftBtn:before{
+  content: "\4f";
+}
+.leftBtnc{
+  left:165px;
+}
+.leftBtnc:before{
+  content: "\50";
+}
+.leftContent{
   position:fixed;
   overflow-y:auto;
   height:100%;
   left:0;
-  width:60px;
+  /*width:60px;*/
+  width: 55px;
   background:#222;
   color: #fff;
+  overflow: hidden;
+  transition: 0.5s all;
+}
+.leftContentShow{
+  width: 175px;
 }
 .logo{
   width:100%;
@@ -184,9 +210,9 @@ table {
 }
 .logo h2{
   margin:0;
-  height:38px;
+  height:34px;
   padding:10px 0;
-  font-size: 18px;  
+  font-size: 12px;  
 }
 .logoInfo{
   display:none;
@@ -242,7 +268,7 @@ table {
   width:125px;
   top:15px;
   left:56px;
-  display:none;
+  /*display:none;*/
 }
 .caret-triangle{
   margin-top:12px;
@@ -258,7 +284,7 @@ table {
   border-radius: 18px; 
 }
 .userName{
-  display:none;
+  /*display:none;*/
   font-size: 14px;
   top:8px;
 }
@@ -290,8 +316,13 @@ table {
   color:#ccc;
 }
 .mainWrapper{
-  margin:0 0 0 71px;
+  margin:0 0 0 65px;
   background:#fff;
+  overflow: hidden;
+  transition: 0.5s all;
+}
+.mainWrapperShow{
+  margin: 0 0 0 185px;
 }
 .mainWrapperSma{
   margin:0 0 0 45px;

js/global.js

@@ -8,6 +8,26 @@ $('#myTabs a').click(function (e) {
 });
 
 $(document).ready(function(){
+
+  $(".leftBtn").click(function () {
+    var leftContent = $("#leftContent");
+    if (!leftContent.hasClass("leftContentShow")) {
+        $("#leftContent").addClass("leftContentShow");
+        $(".leftBtn").addClass("leftBtnc");
+        $(".mainWrapper").addClass("mainWrapperShow");
+    }
+    else {
+        $("#leftContent").removeClass("leftContentShow");
+        $(".leftBtn").removeClass("leftBtnc");
+        $(".mainWrapper").removeClass("mainWrapperShow");
+        $(".subMenuContent").hide();
+    }
+  });
+  // $('.leftBtn').on('click',function () {
+  //   $('.leftBtn').toggleClass('leftBtnc');
+  //   $('.leftContent').toggleClass('leftContentShow');
+  //   $(".mainWrapper").toggleClass('mainWrapperShow');
+  // });
   $(".subMenuContent").hide();
   $(".subMenuTitle a").click(function(){
     $(".subMenuTitle a").removeClass("bg");
@@ -17,27 +37,39 @@ $(document).ready(function(){
     $(this).parent().next().slideToggle();
     $(this).parent().next().addClass("menu-list");
     });
-  $(".leftWrapper").hover(function(){  
-    timer = setTimeout(function(){
-    $(".leftWrapper").stop().animate({width:"200px"},500);
-    $(".mainWrapper").stop().animate({marginLeft:"215px",marginRight:"-200px"},500);
-    $(".mainWrapperSma").stop().animate({marginLeft:"185px",marginRight:"-200px"},500);
-    $(".subMenuText").fadeIn(500);
-    $(".logoInfo").show(500);
-     },300);
-  },function(){
-    clearTimeout(timer);
-    $(".leftWrapper").stop().animate({width:"60px"},500);
-    $(".mainWrapper").stop().animate({marginLeft:"71px",marginRight:"15px",paddingRight:"0"},500);
-    $(".mainWrapperSma").stop().animate({marginLeft:"45px",marginRight:"15px",paddingRight:"0"},500);
-    $(".subMenuText").fadeOut("fast");
-    $(".logoInfo").hide();
-    $(".subMenuContent").slideUp();
-  });
-  $(".logo").hover(function(){
-    $(".logoList").show();
-  },function(){
-    $(".logoList").hide();
-  })
 });
 
+// $(document).ready(function(){
+//   $(".subMenuContent").hide();
+//   $(".subMenuTitle a").click(function(){
+//     $(".subMenuTitle a").removeClass("bg");
+//     $(this).addClass("bg");
+//     $(this).parent().next().removeClass("menu-list");
+//     $(".menu-list").slideUp();
+//     $(this).parent().next().slideToggle();
+//     $(this).parent().next().addClass("menu-list");
+//     });
+//   $(".leftWrapper").hover(function(){  
+//     timer = setTimeout(function(){
+//     $(".leftWrapper").stop().animate({width:"200px"},500);
+//     $(".mainWrapper").stop().animate({marginLeft:"215px",marginRight:"-200px"},500);
+//     $(".mainWrapperSma").stop().animate({marginLeft:"185px",marginRight:"-200px"},500);
+//     $(".subMenuText").fadeIn(500);
+//     $(".logoInfo").show(500);
+//      },300);
+//   },function(){
+//     clearTimeout(timer);
+//     $(".leftWrapper").stop().animate({width:"60px"},500);
+//     $(".mainWrapper").stop().animate({marginLeft:"71px",marginRight:"15px",paddingRight:"0"},500);
+//     $(".mainWrapperSma").stop().animate({marginLeft:"45px",marginRight:"15px",paddingRight:"0"},500);
+//     $(".subMenuText").fadeOut("fast");
+//     $(".logoInfo").hide();
+//     $(".subMenuContent").slideUp();
+//   });
+//   $(".logo").hover(function(){
+//     $(".logoList").show();
+//   },function(){
+//     $(".logoList").hide();
+//   })
+// });
+