【前端】导航栏下拉菜单及简单滑动门效果用一句话JS实现

原理：利用隐藏和显示容器的方式来实现。此效果同样适用于导航栏的下拉菜单。

假设有两个div分别为divid1和divid2

第一个div上：
onMouseOver="divid1.style.display='block';divid2.style.display='none';'"

第二个div上：
onMouseOver="divid2.style.display='block';divid1.style.display='none';'"

PS：手动写技术博客真累……虽然就这么几行

时间： 2024-09-17 04:34:13

【前端】导航栏下拉菜单及简单滑动门效果用一句话JS实现的相关文章

js 导航栏下拉菜单代码

提示:您可以先修改部分代码再运行 js 导航栏下拉菜单代码 Home Single Level Dropdown Dropdown one Dropdown 1.1 Dropdown 1.2 Dropdown 1.3 Dropdown 1.4 Dropdown 1.5 Dropdown 1.6 Dropdown two Dropdown 2.1 Dropdown 2.2 Dropdown 2.3 Dropdown 2.4 Dropdown 2.5 Dropdown three Dropdown

网站导航栏下拉菜单偏移问题

问题描述网站导航栏当电脑分辨率改变时有偏移,这是一个部分的代码,请大家帮忙看看.<DIVclass=menuid=Layer3onmouseover="this.style.visibility=''"style="Z-INDEX:1;LEFT:345px;VISIBILITY:hidden;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:268px"onmouseout="this.style.visi

jquery 无限极下拉菜单的简单实例(精简浓缩版)_jquery

jquery 无限极下拉菜单的简单实例(精简浓缩版) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title> www.jb51.net</title> <script type="

jQuery实现渐变下拉菜单的简单方法_jquery

本文实例讲述了jQuery实现渐变下拉菜单的简单方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).ch

纯CSS导航条下拉菜单代码

提示:您可以先修改部分代码再运行纯CSS导航条下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

JS仿淘宝实现的简单滑动门效果代码_javascript技巧

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

下拉菜单的简单制作

菜单|下拉对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了.本文就来介绍一种简单的下拉菜单的制作.只要你懂得一点点HTML的知识,就可以.即使什么也不懂,照葫芦画瓢也行,呵呵. 第一步,定义下拉菜单JS代码 <SCRIPT language=JavaScript> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf(&qu

纯Css实现下拉菜单的简单例子

大家可能会经常用到hover这属性,用hover实现鼠标经过的颜色改变等等之类,其实hover非常强大. 分享一个鼠标经过,弹出下拉菜单的小技巧: 当我们建好一个列表: <ul> <li class="home"><a href="javascript:;" target="_blank" title="">一级菜单</a></li> <li class=&qu

JavaScript多级下拉菜单代码(简单实用)_导航菜单

栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1->菜单4 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目2->菜单4 栏目2->菜单5 栏目3 栏目3->菜单1 菜单1->子菜单1 菜单1->子菜单2 菜单1->子菜单3 菜单1->子菜单4 栏目3->菜单2 栏目3->菜单3 菜单3->子菜单1 菜单3->子菜单2 菜单3->子菜单3