Question

当媒体查询启动移动设备时，有人可以帮助我弄清楚如何将引导侧栏的代码片段转换为正常的顶部导航，导航器也需要在顶部静态。侧杆位于一个向左边缘移动的容器内：-280px;当侧杆切换/打开时。提前感谢任何可以帮助我的人。
这是HTML

<div class="page-container sidebar-collapsed">
<div class="sidebar-menu">
    <header class="logo"> <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="logo" class="fa fa-html5 fa-5x"></span><!--<img id="logo" src="" alt="Logo"/>--> </a> </header>
        <div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>
          <div class="menu">
            <ul id="menu" >
              <li id="menu-home" class="active"><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
              <li id="menu-comunicacao" ><a href="#"><i class="fa fa-wrench"></i><span>Services</span></a>
                <ul id="menu-comunicacao-sub" >
                  <li id="menu-mensagens" style="width: 220px" ><a href="#">Web design</a>
                  </li>
                  <li id="menu-arquivos" ><a href="#">Graphic Design</a></li>
                  <li id="menu-arquivos" ><a href="#">Event Management</a></li>
                </ul>
              </li>
              <li id="menu-academico" ><a href="#"><i class="fa fa-phone"></i><span>Contact us</span></a>
              </li>
            </ul>
          </div>
        </div>

这是css

.page-container {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
.page-container.sidebar-collapsed {
  transition: all 100ms linear;
  transition-delay: 100ms;
}

.page-container.sidebar-collapsed-back {
  margin-left: -280px;
  transition: all 300ms linear;
}

.page-container.sidebar-collapsed .sidebar-menu {
  width: 65px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .sidebar-menu {
  width: 280px;
  transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed .sidebar-icon {
  transform: rotate(90deg);
  transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed-back .sidebar-icon {
  transform: rotate(0deg);
  transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed .logo {
  padding: 21px;
  height: 136px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .logo {
  width: 100%;
  padding: 21px;
  height: 136px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed #logo {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.page-container.sidebar-collapsed-back #logo {
  opacity: 1;
  transition: all 200ms ease-in-out;
  transition-delay: 300ms;
}

.page-container.sidebar-collapsed #menu span {
  opacity: 0;
  transition: all 50ms linear;
}

.page-container.sidebar-collapsed-back #menu span {
  opacity: 1;
  transition: all 200ms linear;
  transition-delay: 300ms;
}

.sidebar-menu {
  position: fixed;
  float: left;
  width: 280px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #303641;
  color: #aaabae;
  font-family: 'Titillium Web', sans-serif;
  /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);*/
  z-index: 1;
}

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

#menu li {
  position: relative;
  margin: 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(69, 74, 84, 0.7);
  padding: 0;
}

#menu li ul {
  opacity: 0;
  height: 0px;
}

#menu li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #aaabae;
  white-space: nowrap;
  z-index: 2;
}
#menu li a span{
  font-size: 18px;
  margin-left: 10px;
}
#menu li a:hover {
  color: #ffffff;
  background-color: #333944;
  border-left: 3px solid #D19B3D;
  text-decoration: none;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

#menu li.active > a {
  color: #ffffff;
  border-left: 3px solid #D19B3D;
  background-color: #4F5B69;  
}

#menu ul li { background-color: #2b303a; }

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#menu li ul {
  position: absolute;
  visibility: hidden;
  right: 100%;
  top: -1px;
  background-color: #2b303a;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.1s linear;
  border-top: 1px solid rgba(69, 74, 84, 0.7);
}

#menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}

#menu li li ul {
  right: 100%;
  visibility: hidden;
  top: -1px;
  opacity: 0;
  transition: opacity 0.1s linear;
}

#menu li li:hover ul {
  visibility: visible;
  opacity: 1;
}

#menu .fa { 
  margin-right: 5px; 
  font-size: 18px; 
}

.logo {
  width: 100%;
  padding: 21px;
  box-sizing: border-box;
}

.sidebar-icon {
  position: relative;
  float: right;
  margin-top: 32px;
  border: 1px solid #454a54;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 3px;
  color: #888;
  background-clip: padding-box;
  text-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}

.fa-html5 {
  color: #fff;
  margin-left: 50px;
}

这是javascript

var toggle = true;

$(".sidebar-icon").click(function() {                
  if (toggle){
    $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
    setTimeout(function() {
      $("#menu span").css({"position":"relative"});
    }, 1000);
  }
  else {
    $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
    $("#menu span").css({"position":"absolute"});
  }

toggle = !toggle;

});

Twitter引导带侧导航

0 个答案: