滑动单级菜单

最新推荐文章于 2024-09-16 23:33:40 发布
最新推荐文章于 2024-09-16 23:33:40 发布
阅读量77 收藏
点赞数
文章标签： css html css3 js less ViewUI
原文链接：https://www.script-tutorials.com/sliding-single-level-menu/
版权

Menu is one of the important components of any site. Today it is difficult to find a website without the navigation menu. Today we have prepared a modern looking single-level menu. You might think – again, but the menu looks really interesting, its feature is a sliding panel which highlights the active elements (something like a lavalamp menu). Previously, we have already seen the creation of lavalamp menu (one of our tutorials), but it had a slight drawback – it was not possible to set the active element. We have overcome this obstacle, and in today’s menu, you can initially indicate active elements (as it is seen in the demo). Now we can start looking at the order of its creation.

菜单是任何站点的重要组成部分之一。 今天，没有导航菜单很难找到一个网站。 今天，我们准备了外观现代的单层菜单。 您可能会再想一想，但是菜单看起来确实很有趣，它的功能是滑动面板，突出显示了活动元素(类似于lavalamp菜单)。 以前，我们已经看到了lavalamp菜单的创建(我们的教程之一)，但是它有一个小缺点-无法设置活动元素。 我们已经克服了这一障碍，在今天的菜单中，您可以最初指示活动元素(如演示中所示)。 现在，我们可以开始查看其创建顺序。

现场演示

HTML (HTML)

We did not invent a special html menu structure, as usual, we decided to use the usual UL-LI elements to build the menu. Here is the html of our menu:

像往常一样，我们没有发明特殊的html菜单结构，我们决定使用通常的UL-LI元素来构建菜单。 这是菜单的html： 


<nav id="menu">
  <ul>
    <li><a href="">HTML/CSS</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">jQuery</a></li>
    <li><a href="">PHP</a></li>
    <li><a href="">Javascript</a></li>
    <li><a href="">Design</a></li>
    <li><a href="">Other</a></li>
    <div class="current">
      <div class="ctoparr"></div>
      <div class="cback"></div>
      <div class="cbotarr"></div>
    </div>
  </ul>
</nav>


<nav id="menu">
  <ul>
    <li><a href="">HTML/CSS</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">jQuery</a></li>
    <li><a href="">PHP</a></li>
    <li><a href="">Javascript</a></li>
    <li><a href="">Design</a></li>
    <li><a href="">Other</a></li>
    <div class="current">
      <div class="ctoparr"></div>
      <div class="cback"></div>
      <div class="cbotarr"></div>
    </div>
  </ul>
</nav>

As I noted before, nowe we have the opportunity to set active elements – simply add ‘selected’ class for a necessary LI element, example:

如前所述，现在我们有机会设置活动元素–只需为必要的LI元素添加“ selected”类，例如： 


<nav id="menu">
  <ul>
    <li><a href="">HTML/CSS</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">jQuery</a></li>
    <li><a href="">PHP</a></li>
    <li class="selected"><a href="">Javascript</a></li>
    <li><a href="">Design</a></li>
    <li><a href="">Other</a></li>
    <div class="current">
      <div class="ctoparr"></div>
      <div class="cback"></div>
      <div class="cbotarr"></div>
    </div>
  </ul>
</nav>


<nav id="menu">
  <ul>
    <li><a href="">HTML/CSS</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">jQuery</a></li>
    <li><a href="">PHP</a></li>
    <li class="selected"><a href="">Javascript</a></li>
    <li><a href="">Design</a></li>
    <li><a href="">Other</a></li>
    <div class="current">
      <div class="ctoparr"></div>
      <div class="cback"></div>
      <div class="cbotarr"></div>
    </div>
  </ul>
</nav>

Besides of UL-LI elements, you can notice another added element – DIV with three children:

除了UL-LI元素之外，您还可以注意到另一个添加的元素– DIV包含三个子元素： 


<div class="current">
  <div class="ctoparr"></div>
  <div class="cback"></div>
  <div class="cbotarr"></div>
</div>


<div class="current">
  <div class="ctoparr"></div>
  <div class="cback"></div>
  <div class="cbotarr"></div>
</div>

This is the sliding element that moves behind active (and hover elements). Now we can start styling our menu.

这是在活动(和悬停元素)后面移动的滑动元素。 现在，我们可以开始设计菜单样式。

CSS (CSS)

The menu is aligned to center, with 90% in width and 128px in height.

菜单对齐中心，宽度为90％，高度为128px。 


#menu {
  display: inline-block;
  height: 128px;
  margin: 100px 5% 0;
  text-align: center;
  white-space: nowrap;
  width: 90%;
}
#menu ul {
  margin: 0;
  padding: 0;
  position: relative;
}
#menu ul:after {
  clear: both;
  content: "";
  display: block;
}


#menu {
  display: inline-block;
  height: 128px;
  margin: 100px 5% 0;
  text-align: center;
  white-space: nowrap;
  width: 90%;
}
#menu ul {
  margin: 0;
  padding: 0;
  position: relative;
}
#menu ul:after {
  clear: both;
  content: "";
  display: block;
}

Menu elements are aligned from left to right, all elements are of the same width, with different icons at background:

菜单元素从左到右对齐，所有元素的宽度相同，背景不同。 


#menu li {
  background-position: 50% center;
  display: block;
  float: left;
  font-size: 18px;
  font-weight: bold;
  height: 128px;
  line-height: 210px;
  margin-right: 1%;
  position: relative;
  white-space: nowrap;
  width: 13%;
  z-index: 2;
}
#menu li:after {
  background: url("../images/bg.png") repeat scroll 0 0;
  content: "";
  height: 100%;
  position: absolute;
  right: -10%;
  top: 0;
  width: 10%;
}
#menu li:nth-child(1):before {
  background: url("../images/bg.png") repeat scroll 0 0;
  content: "";
  height: 100%;
  left: -10%;
  position: absolute;
  top: 0;
  width: 10%;
}
#menu li:nth-child(1) {
  background: url("../images/1.png") no-repeat center;
  margin-left: 1%;
}
#menu li:nth-child(2) {
  background: url("../images/2.png") no-repeat center;
}
#menu li:nth-child(3) {
  background: url("../images/3.png") no-repeat center;
}
#menu li:nth-child(4) {
  background: url("../images/4.png") no-repeat center;
}
#menu li:nth-child(5) {
  background: url("../images/5.png") no-repeat center;
}
#menu li:nth-child(6) {
  background: url("../images/1.png") no-repeat center;
}
#menu li:nth-child(7) {
  background: url("../images/2.png") no-repeat center;
}
#menu a {
  color: #eee;
  display: block;
  height: 100%;
  text-decoration: none;
}


#menu li {
  background-position: 50% center;
  display: block;
  float: left;
  font-size: 18px;
  font-weight: bold;
  height: 128px;
  line-height: 210px;
  margin-right: 1%;
  position: relative;
  white-space: nowrap;
  width: 13%;
  z-index: 2;
}
#menu li:after {
  background: url("../images/bg.png") repeat scroll 0 0;
  content: "";
  height: 100%;
  position: absolute;
  right: -10%;
  top: 0;
  width: 10%;
}
#menu li:nth-child(1):before {
  background: url("../images/bg.png") repeat scroll 0 0;
  content: "";
  height: 100%;
  left: -10%;
  position: absolute;
  top: 0;
  width: 10%;
}
#menu li:nth-child(1) {
  background: url("../images/1.png") no-repeat center;
  margin-left: 1%;
}
#menu li:nth-child(2) {
  background: url("../images/2.png") no-repeat center;
}
#menu li:nth-child(3) {
  background: url("../images/3.png") no-repeat center;
}
#menu li:nth-child(4) {
  background: url("../images/4.png") no-repeat center;
}
#menu li:nth-child(5) {
  background: url("../images/5.png") no-repeat center;
}
#menu li:nth-child(6) {
  background: url("../images/1.png") no-repeat center;
}
#menu li:nth-child(7) {
  background: url("../images/2.png") no-repeat center;
}
#menu a {
  color: #eee;
  display: block;
  height: 100%;
  text-decoration: none;
}

The slider is a small element with smooth transition effect (to move it). It contains of the background and two additional elements (at top and bottom) – little triangles with additional shadows:

滑块是一个具有平滑过渡效果(移动它)的小元素。 它包含背景和两个附加元素(在顶部和底部)–带有附加阴影的小三角形： 


.current{
  height: 158px;
  left: 7.5%;
  margin-left: -50px;
  position: absolute;
  top: -13px;
  width: 100px;
  -webkit-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -moz-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -o-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -ms-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
}
.cback {
  background-color: #aadd33;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  height: 100%;
  position: absolute;
  width: 100%;
}
.ctoparr {
  height: 12px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 13px;
  width: 100%;
  z-index: 2;
}
.ctoparr:before {
  border-radius: 20%;
  box-shadow: 0 0 15px #000;
  content: "";
  height: 10px;
  left: 5%;
  position: absolute;
  top: -10px;
  width: 90%;
}
.ctoparr:after{
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #aadd33;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  top: 0;
  width: 0;
}
.cbotarr {
  bottom: 17px;
  height: 12px;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.cbotarr:before {
  border-radius: 20%;
  bottom: -10px;
  box-shadow: 0 0 15px #000;
  content: "";
  height: 10px;
  left: 5%;
  position: absolute;
  width: 90%;
}
.cbotarr:after {
  border-bottom: 12px solid #aadd33;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  bottom: 0;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0;
}


.current{
  height: 158px;
  left: 7.5%;
  margin-left: -50px;
  position: absolute;
  top: -13px;
  width: 100px;
  -webkit-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -moz-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -o-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  -ms-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
  transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
}
.cback {
  background-color: #aadd33;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  height: 100%;
  position: absolute;
  width: 100%;
}
.ctoparr {
  height: 12px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 13px;
  width: 100%;
  z-index: 2;
}
.ctoparr:before {
  border-radius: 20%;
  box-shadow: 0 0 15px #000;
  content: "";
  height: 10px;
  left: 5%;
  position: absolute;
  top: -10px;
  width: 90%;
}
.ctoparr:after{
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #aadd33;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  top: 0;
  width: 0;
}
.cbotarr {
  bottom: 17px;
  height: 12px;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.cbotarr:before {
  border-radius: 20%;
  bottom: -10px;
  box-shadow: 0 0 15px #000;
  content: "";
  height: 10px;
  left: 5%;
  position: absolute;
  width: 90%;
}
.cbotarr:after {
  border-bottom: 12px solid #aadd33;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  bottom: 0;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0;
}

Finally, in order to move the slider like in the lavalamp menu, we need to add the following styles:

最后，为了像lavalamp菜单中一样移动滑块，我们需要添加以下样式： 


#menu li.selected:nth-child(1) ~ .current {
  left: 7.5%;
}
#menu li.selected:nth-child(2) ~ .current {
  left: 21.5%;
}
#menu li.selected:nth-child(3) ~ .current {
  left: 35.5%;
}
#menu li.selected:nth-child(4) ~ .current {
  left: 49.5%;
}
#menu li.selected:nth-child(5) ~ .current {
  left: 63.5%;
}
#menu li.selected:nth-child(6) ~ .current {
  left: 77.5%;
}
#menu li.selected:nth-child(7) ~ .current {
  left: 91.5%;
}
#menu li:nth-child(1):hover ~ .current {
  left: 7.5%;
}
#menu li:nth-child(2):hover ~ .current {
  left: 21.5%;
}
#menu li:nth-child(3):hover ~ .current {
  left: 35.5%;
}
#menu li:nth-child(4):hover ~ .current {
  left: 49.5%;
}
#menu li:nth-child(5):hover ~ .current {
  left: 63.5%;
}
#menu li:nth-child(6):hover ~ .current {
  left: 77.5%;
}
#menu li:nth-child(7):hover ~ .current {
  left: 91.5%;
}


#menu li.selected:nth-child(1) ~ .current {
  left: 7.5%;
}
#menu li.selected:nth-child(2) ~ .current {
  left: 21.5%;
}
#menu li.selected:nth-child(3) ~ .current {
  left: 35.5%;
}
#menu li.selected:nth-child(4) ~ .current {
  left: 49.5%;
}
#menu li.selected:nth-child(5) ~ .current {
  left: 63.5%;
}
#menu li.selected:nth-child(6) ~ .current {
  left: 77.5%;
}
#menu li.selected:nth-child(7) ~ .current {
  left: 91.5%;
}
#menu li:nth-child(1):hover ~ .current {
  left: 7.5%;
}
#menu li:nth-child(2):hover ~ .current {
  left: 21.5%;
}
#menu li:nth-child(3):hover ~ .current {
  left: 35.5%;
}
#menu li:nth-child(4):hover ~ .current {
  left: 49.5%;
}
#menu li:nth-child(5):hover ~ .current {
  left: 63.5%;
}
#menu li:nth-child(6):hover ~ .current {
  left: 77.5%;
}
#menu li:nth-child(7):hover ~ .current {
  left: 91.5%;
}

Thus, as you can see, when we hover our child elements, it moves the slider toward the hover element position (in it’s middle). Besides of that, it will keep the slider at the position of pre-selected element (.selected class). That’s all. We have just completed creating our new menu with the slider.

因此，如您所见，当我们将子元素悬停时，它会将滑块移向悬停元素位置(在中间)。 除此之外，它将使滑块保持在预选元素(.selected类)的位置。 就这样。 我们刚刚完成了使用滑块创建新菜单的操作。

Come back to our website next time for new tutorials

下次返回我们的网站以获取新教程

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

翻译自: https://www.script-tutorials.com/sliding-single-level-menu/

cuken7684698822
关注
js实现鼠标放在一级菜单，下滑出二级菜单
dongciqiu0026的博客
10-23 2079
初始状态 鼠标放在tab4上 实现的代码如下 <html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } ...
android菜单导航
11-30
- `DrawerLayout`是实现侧滑菜单的关键，它作为根布局，可以包含一个主内容视图和一个可滑动的视图（通常是`NavigationView`）。 - 使用`ActionBarDrawerToggle`可以将汉堡图标与`DrawerLayout`关联，实现点击图标...
使用slidingmenu ，侧滑菜单
随手记两笔
04-20 351
1、实例化slidingmenu      2、设置slidingmenu的模式(左滑，右滑，左右滑) 3、设置slidingmenu的内容  4、设置slidingmenu触摸方式(none,margin,screen) 5、设置slidingmenu的侧滑出来的宽度  6、slidingmenu显示模式（content会公用actionbar,window）
一级横向滑动，二级竖向下拉综合菜单
Yao,Mane
03-24 1208
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">一级横向滑动，二级竖向下拉综合菜单 body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;}body { font:12px "Arial","宋体";
better-scroll实现菜单和列表滚动效果联动。
SilenceJude的博客
09-04 4199
上一篇中，我们使用better-scroll实现了列表滚动效果，但是并没有与菜单栏关联起来，这里我们就实现左右联动功能。 解决思路：右侧滚动的时候，可以通过获取右侧列表栏实时的Y轴坐标，然后判断Y轴坐标落在某一个区间，记录下该区间的数组下标，判断左侧高亮的数组索引下标，绑定一个动态类赋予给标的菜单数组索引即可。...
html中如何导入滑动选择器,实例帮助你了解HTML5滑动区域选择元素Sliderelement
weixin_39995108的博客
06-03 789
HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素，例如，选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间，但是现在只是如何将他们整合到浏览器中。因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单，支持对于支持它的浏...
unity自制多级树型菜单，实现分层次列表展开，仿unity编辑界面Hierarchy窗口
热门推荐
qq_33179161的博客
04-03 1万+
想实现一个菜单分级的功能，专业术语叫做树型菜单，很多应用软件的目录有采用该方式，层次感很强，结构清晰，但UGUI并没有原生的插件，去网上搜了一下，发现相关资源并不多，调试出一大堆Bug，于是自己决定按照unity界面Hierarchy样式做一个，目录结构清晰，可动态添加，删除，修改子菜单，理论上可无限级设置子菜单。 模板效果如下： 思路： 首先发现每个级的ItemPanel...
html5 页面可以上下滚动条,h5页面上下左右滑动
weixin_35837856的博客
06-03 2109
var startX = 0,startY = 0,operate = 0;backDom.addEventListener('touchstart', function(evt) {evt.preventDefault();var touch = evt.touches[0], //获取第一个触点x = Number(touch.pageX), //页面触点X坐标y = Number(touch...
C# WinForm中MenuStrip动态菜单使用总结
lcnmdfx的专栏
11-11 2148
在C# WinForm中使用菜单控件，我想MenuStrip是很多人的首选，如何使用我就不多说了，我就讲讲个人的使用心得。 以前在使用该控件的时候只知道在窗体设计器中手动输入菜单项目，这样做是比较方便，但却不灵活。 某次要做的一个项目，涉及到权限分配，不同权限的人需要用到不同的菜单，这就需要在窗体载入的时候动态创建MenuStrip及其菜单项目。 后来上网搜索了很多相关创建动态菜单的代码，但
手机web树形菜单结构
06-02
3. **动态加载**：支持单级和批量加载，避免一次性加载大量数据导致页面卡顿。根据用户的选择或滚动动态加载子菜单，优化性能。 4. **数据处理**：既可以处理静态数据（如预定义的菜单），也可以处理动态数据（如从...
C#实现左侧菜单效果
05-29
例如，`TreeView`控件非常适合用来创建多级菜单结构，而`MenuStrip`或`ContextMenuStrip`则适合单级菜单。在本例中，考虑到标题提及的"OutlookBar"，我们可能会使用类似Outlook风格的导航栏，这可能涉及到自定义控件...
jQuery高仿真移动手机滑动侧边栏布局插件
12-11
这个插件不仅支持单级菜单，还支持多级菜单，可以方便地在网页上实现复杂的导航结构。通过简单的API调用和自定义配置，开发者可以轻松地将此功能整合到自己的项目中。 ### 二、核心功能 1. **滑动侧边栏**：`...
一个很酷的菜单效果
10-23
单级菜单通常比多级菜单更简洁，易于理解和操作。它只有一层子菜单项，用户可以快速定位到他们想要的内容。实现这样的效果，我们可以利用CSS的伪类（如`:hover`）来触发鼠标悬停时的样式变化，结合JavaScript或...
JS+CSS全力打造的一级横向滑动，二级竖向下拉综合菜单
GoodShot的专栏
08-30 4348
【荐】JS+CSS全力打造的一级横向滑动，二级竖向下拉综合菜单_网页代码站(www.webdm.cn) <!-- body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;} body { font:12px "Arial","宋体";color:#333;background:#FFF;} a{border:no
CSS的offset属性
读心悦
09-15 633
如果你确实需要在CSS中根据元素的偏移量来应用样式，并且这个偏移量是动态的（比如，基于JavaScript计算得出的），你可能需要使用JavaScript来动态地修改元素的类名或内联样式，以反映这些变化。: 虽然这些属性不是直接用于定位元素的，但它们可以影响元素与其他元素之间的空间，从而间接影响布局和元素的“偏移”效果。属性本身不是直接用于“偏移”的，但它可以用来移动元素，包括旋转、缩放、倾斜等。可以实现元素的水平或垂直移动，而不需要改变文档流中的实际位置。，这些属性用于获取元素的位置和尺寸信息。
CSS——网格布局（display: grid）之上篇
最新发布
懒羊羊大王的博客
09-16 1685
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
自定义Android滑动抽屉菜单实现详解
"Android实现自定义滑动式抽屉效果菜单" 在Android开发中，抽屉效果菜单是一种常见的设计模式，通常用于实现侧滑导航。Android系统提供了预置的组件如SlidingDrawer（已废弃）和DrawerLayout来实现这种效果，但它们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值