Question

找到一个简单的粘贴导航，将小菜单放在浏览器窗口的左侧。到目前为止没有问题，但我不确定如何将其转换为滑动菜单，缩小为您在网站模板主题颜色切换器上看到的图标。 {编辑 - 我一直在搜索谷歌，但我没有使用我认为正确的条款。感谢任何有关我正在寻找的建议，以便解决这个问题并学习。}

像Photoshop中的这个快速草图。

小提琴是：JSfiddle

，代码是：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
  #menu {
    position: fixed;
    left: 0;
    top: 50%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 5;
    background: white;
    color: #4E4E4E;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: #4e4e4e;
    border-left: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;

  }
  #menu li { margin: 0 }
  #menu a { color: inherit }

</style>
</head>

<body>
<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

</body>
</html>

Answer 1

最简单的方法是在您的菜单中添加一个“方形”，假元素:after位于您想要的位置：

 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
}

before只是一个白色的盒子，可以覆盖after的阴影，所以它看起来会加入到menú中，

然后将菜单放在窗口外面，只显示after元素，然后点击一下将一个类添加到菜单中以“显示”或“隐藏”。

$('#menu').on('click', function(){
    $('#menu').toggleClass('visible');
});

 #menu {
   position: fixed;
   left: -198px;
   top: 50%;
   width: 8em;
   margin: -2.5em 0 0 0;
   z-index: 5;
   background: white;
   color: #4E4E4E;
   font-weight: bold;
   font-size: large;
   text-align: left;
   border: #4e4e4e;
   border-left: none;
   padding: 0.5em 0.5em 0.5em 2.5em;
   box-shadow: 0 1px 3px black;
   transition: left 0.2s linear;
 }
 
 #menu li {
   margin: 0
 }
 
 #menu a {
   color: inherit
 }
 
 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
 }
 .visible {
   left:0 !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=menu>
  <li><a href="#L384">Section 1</a>
    <li><a href="#details">Section 2</a>
      <li><a href="#FAQ">Section 3</a>
</ul>

<强> JSFIDDLE

固定位置菜单修改指南

1 个答案: