Fatal编程技术网
  • javascript/
  • Javascript 固定位置菜单修改指南

Javascript 固定位置菜单修改指南

javascript css menu

Javascript 固定位置菜单修改指南,javascript,css,menu,show-hide,Javascript,Css,Menu,Show Hide,找到一个简单的导航条，将小菜单放在浏览器窗口的左侧。到目前为止还没有问题，但我不确定如何将其转化为一个滑动菜单，将其简化为一个图标，就像您在网站模板主题颜色切换器上看到的那样。{编辑-我一直在搜索谷歌，但没有使用我认为正确的术语。感谢您对我正在寻找的内容提出任何建议，以便解决此问题并学习。} 类似于Photoshop中的快速草图。 小提琴是： 代码是： <!doctype html> <html> <head> <meta charset="UTF-8

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

类似于Photoshop中的快速草图。

小提琴是：

代码是：

<!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>


无标题文件
#菜单{
位置：固定；
左：0；
最高：50%；
宽度：8em；
保证金：-2.5em 0；
z指数：5；
背景：白色；
颜色：#4e4e；
字体大小：粗体；
字体大小：大号；
文本对齐：左对齐；
边界：#4e4e；
左边界：无；
填充：0.5em 0.5em 0.5em 2.5em；
盒影：0 1px 3 px黑色；
}
#菜单li{margin:0}
#菜单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;
}


在
之前的
只是一个白色的框，用来覆盖在
之后的
的阴影，因此它看起来与门卫相连

然后将菜单放置在窗口外，仅在
元素之后显示
，并在单击时创建一个事件，将类添加到菜单中以“显示”或“隐藏”



$（'#菜单'）。在（'click'，function（）上{
$（“#菜单”）.toggleClass（'visible'）；
});

#菜单{
位置：固定；
左：-198px；
最高：50%；
宽度：8em；
保证金：-2.5em 0；
z指数：5；
背景：白色；
颜色：#4e4e；
字体大小：粗体；
字体大小：大号；
文本对齐：左对齐；
边界：#4e4e；
左边界：无；
填充：0.5em 0.5em 0.5em 2.5em；
盒影：0 1px 3 px黑色；
过渡：左0.2s线性；
}
#菜单里{
保证金：0
}
#菜单a{
颜色：继承
}
#菜单：之后{
内容：''；
位置：绝对位置；
排名：0；
右：-40px；
高度：40px；
宽度：40px；
盒影：0 1px 3 px黑色；
显示：块；
背景色：#fff；
}
#菜单：之前{
内容：''；
位置：绝对位置；
z指数：1；
顶部：1px；
右：-1px；
高度：39px；
宽度：4px；
显示：块；
背景色：#fff；
}
.可见{
左：0！重要；
}




    

  • 

  • 

  • 

我在你的问题中没有看到任何javascript。如果您试图使用javascript实现您的目标，请发布您所拥有的内容。如果没有，请参考帮助主题并修改您的问题。帮助开发人员解决代码中的特定问题也是如此。这不是一个免费的编码服务。我感谢你对我的问题的诚实和直率的回答，但也许你在那里读到了一些事实上不在那里的东西。我相当肯定没有人要求提供“免费编码服务”，但无论如何，感谢您的解释。重新阅读我的帖子，我意识到我应该非常明确地要求在一个特定的方向上提供指导，这样我就可以解决我自己的问题，并将修改以添加这个。啊！使用after元素是我要寻找的线索，谢谢。我在谷歌搜索中遇到了一些问题，所以我一直在寻找与我所需无关的答案。这种迷你菜单有“行业”名称吗？固定菜单通常显示顶部和底部类型，浮动菜单会显示上千个css浮动教程。Lol这些菜单可能有一些“行业”名称，但我帮不了你，可能有些带有jqueryui、bootstrap和许多类似功能的库可能有这些类型的自定义菜单，但由于我是靠自己的设计/代码赚钱的，我几乎从不使用它们。好吧，再次感谢你。我本可以要求更多，但这符合我的要求。现在我正在享受修改和玩它的乐趣。我会发现你的答案非常有用，而且很有趣。