滑动菜单

最新推荐文章于 2023-12-11 06:00:00 发布
最新推荐文章于 2023-12-11 06:00:00 发布
阅读量359 收藏
点赞数
分类专栏： javascript 文章标签： function menu xhtml html border float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangna01314/article/details/4905624
版权

其实，我写blog的主要原因，是为了整理知识点，方便自己在以后要是有遇到类似的就直接可以使用。今天看到一个滑动菜单，很常用，就自己试着做了一下。当然里面的script是借用大师的，自己直接拿过来使用的，先看一下效果图：

当鼠标点到下一个菜单时候，下面的红线会自动滑动。看一下html代码，很简单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="script.js"  type="text/javascript"></script>
<title>无标题文档</title>
<style>
*{ margin:0 ; padding:0;}
body{ font-size:12px;}
.menu{ position:relative; width:500px; height:40px; margin:auto; margin-top:20px  ; border:1px solid red;}
.menu ul { list-style:none ;  z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu ul li { list-style:none;width:150px; float:left;}
.menu a, .menu a:active, .menu a:visited {text-decoration:none; padding:10px}
.menu a:hover {color:#33FFFF;}
#slide {position:absolute; bottom:0; height:4px; background:#CC3333; z-index:10;}
</style>
</head>

<body οnlοad="menuSlider.init('menu','slide')">
<div class="menu">
 <ul id="menu">
  <li  value="1"><a href="#">首页</a></li>
  <li><a href="#">产品中心</a></li>
  <li><a href="#">人才招聘</a></li>
 </ul>
 <div id="slide"><!-- --></div>
</div>
</body>
</html>
接下来看一下script代码:

var menuSlider=function(){
 var m,e,g,s,q,i; e=[]; q=8; i=8;
 return{
  init:function(j,k){
   m=document.getElementById(j); e=m.getElementsByTagName('li');
   var i,l,w,p; i=0; l=e.length;
   for(i;i<l;i++){
    var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
    c.οnmοuseοver=function(){menuSlider.mo(this)}; c.οnmοuseοut=function(){menuSlider.mo(s)};
   }
   g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
  },
  mo:function(d){
   clearInterval(m.tm);
   var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
   m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
  },
  mv:function(el,ew){
   var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
   if(l!=el||w!=ew){
    if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
    if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
   }else{clearInterval(m.tm)}
}};}();

 

呵呵，就这样做成了。

 

同样也可以做成这样的：

 

只要要slide的样式改成这样的iu可以了

#slide {position:absolute; top:6px; height:24px; background:#CCFFFF; z-index:10}

这种就是菜单后面加图片的样式。

yangna01314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android studio 滑动菜单,Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
weixin_30308101的博客
05-27 1254
本文为大家分享了Android Studio实现滑动菜单Tab效果的具体代码，供大家参考，具体内容如下描述：之前有做过一个记账本APP，拿来练手的，做的很简单，是用Eclipse开发的；最近想把这个APP重新完善一下，添加了一些新的功能，并选用Android Studio来开发；APP已经完善了一部分，现在就想把已经做好的功能整理一下，记录下来。效果图：可以手动滑动菜单也可以通过点击头部菜单进行切...
左右滑动菜单
04-06
android底部导航栏，
c++ 菜单动态效果
weixin_30492601的博客
12-12 167
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> #include <stdarg.h> #include <time.h> #include "hello.h" #include <share....
滑动菜单（实例）
Jinming Su
11-19 340
实践题 - 选项卡 /* CSS样式制作 */ // JS实现选项卡切换 房产 家居 二手房 175万购昌平邻铁三居 总价20万买一居 200万
可拖动菜单 【总结】
10-05 283
需求 应老罗的要求，做一个可拖动的长条形列表菜单。 这是原来的样子 进入编辑界面，它的编辑添加都不能实时更新，而且操作起来比较麻烦。 所以我估计一下应该有这些需求： 1.修改，取消，确认按钮 2.点击修改，菜单每一项都可以拖动，每一项都可以修改，每一项都可以删除 3.每一个父级都可添加一个子节点或添加一个子集合 4.点击取消，恢复到点击修改之前的状态 5.点击确认...
自定义滑动栏
08-24
通过动画框架实现自定义滑动栏实现，详细可参考博客http://blog.csdn.net/mao19931004/article/details/52304123
RecyclerView系列之滑动菜单
Aislli的博客
06-29 1760
一、背景 前面已经实现了 RecyclerView 的下拉刷新和上拉加载更多，给 RecyclerView 添加 header，这两个用的比较多，这次实现的是滑动菜单，实现这个是因为产品经理通常会告诉你，我们要做一个和某某应用一样的效果。有人就说了：“这产品总是模仿，总是让做和别人一样的效果（小声嘀咕：关键这还真不那么容易实现）”。这就不能忍，那还有让你更不能忍的，产品告诉你做一个跟 QQ 的滑动...
Android 滑动菜单(DrawerLayout + NavigationView )
最新发布
帅次的博客
12-11 730
1.主内容视图一定要是DrawerLayout的第一个子视图且宽度和高度需要match_parent。 2.侧滑菜单必须添加android:layout_gravity属性，推荐使用 start|end，不推荐使用left|right。 3.侧滑视图的宽度以dp为单位，官方建议一般小于320(为了总能看到一些主内容视图)。 4.设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
android菜单横向滑动,横向滑动菜单HorizontalScrollView
weixin_42515045的博客
05-25 795
public class MainActivity extends FragmentActivity {private HorizontalScrollView hsv;//private LinearLayout nav_ll;//private ViewPager nav_vp;private int itemWidth;//private int selectItemIndex = 0;pr...
js做滑动菜单
halo1416的博客
09-25 937
首先，先来一张效果图： 其次，总结一下需要注意的地方： 整个代码都需要写在 window.onload 事件中，因为页面加载完毕 ,才能拿到html元素，否则会报错； 事件注册以后，在里面拿不到  lis[i]  和  遍历数组的索引，所有在事件函数内只能用 this 或者事件源 event.target； 因为原因2，所有需要把菜单的索引存下来，然后到事件注册后取出索引； tabI...
手机端滑动菜单
04-02
适用于手机端js显示滑动菜单。或者其他下拉选项， 适用于手机端显示滑动菜单。或者其他下拉选项。
android滑动菜单
05-09
android滑动菜单
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
10-23
主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下
Android自定义横向滑动菜单的实现
08-27
Android自定义横向滑动菜单的实现 Android 自定义横向滑动菜单的实现是 Android 开发中一个常见的需求，通过自定义控件来实现横向滑动菜单，可以满足开发者的需求。下面是 Android 自定义横向滑动菜单的实现的相关...
C++实例 菜单操作
刘华世的博客
03-11 1651
#include #include "menu.h" //载入资源文件所使用之标头文件 class MyFrame : public CFrameWnd { private: CMenu MainMenu, *SysMenu, *PopMenu, * SubMenu; COLORREF color; public: MyFrame() //建构符 { Create(NULL, /
用JavaScript写的登录验证
我想要生活简单一点。
12-04 6268
正在学习JavaScript，所以就将自己写的小例子上传上来，其实上网搜一下，有大把的JavaScript的验证实例，要自己慢慢研究，自己动手写一下，自己很粗心，希望以后要细心点！贴上代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.denglu{ width
关于float、cssFloat和styleFloat的讨论
我想要生活简单一点。
02-02 1513
HTML DOM cssFloat 属性    如果在一行中对于浮动元素而言空间太少，则这个元素会跳到下一行，这个过程会持续到有足够空间的一行为止。    今天使用图片滚动的js脚本，要用到float属性，发现float这种写法对IE和FF都不起作用，后来改为styleFloat发现对IE起作用了，但是在FF下却没反应，后来在改为cssFloat，FF下    没问题了，IE却又不行了，得
asp.net mvc Flexigrid 的一个实例
我想要生活简单一点。
08-05 1274
好久没有写blog，嘻嘻····因为公司项目中有使用Flexigrid,所以就学习了微软的mvc  flexigrid 的一个简单的例子参考网站：http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx#flexigrid-download注意：需要一个实例数据库Northwind.mdf
Android滑动菜单
08-04
Android滑动菜单是一种常见的UI设计，用于在移动应用中实现导航功能。通过滑动手势，用户可以打开或关闭菜单，以便访问应用的不同功能或页面。在Android中，有多种方式可以实现滑动菜单效果。 一种常见的实现方式是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值