简洁下拉菜单导航及特效当前时间显示

最新推荐文章于 2021-01-20 10:37:12 发布
最新推荐文章于 2021-01-20 10:37:12 发布
阅读量688 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu920604/article/details/53943109
版权

不需要任何插件的一个纯jQuery的js下拉菜单导航及滚动的当前时间显示

demo可以直接复制使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>简洁下拉菜单导航及特效当前时间显示</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
#jsddm{margin: 0;padding: 0}
#jsddm li{float: left;list-style: none;font: 12px Tahoma, Arial}
#jsddm li a{display: block;background: #324143;padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}
#jsddm li a: hover{background: #24313C}
#jsddm li ul{margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}
#jsddm li ul li{float: none;display: inline}
#jsddm li ul li a{width: auto;background: #A9C251;color: #24313C}
#jsddm li ul li a: hover{background: #8EA344}
.nav_d {float:left;width: 800px;height: 300px;}
</style>
  <script src="jquery-1.8.3.js" type="text/javascript"></script>
 </head>
<script type="text/javascript">
<!--
	var timeout         = 500;
	var closetimer		= 0;
	var ddmenuitem      = 0;
	var initializationTime=(new Date()).getTime();
	function showTime(){
		var now=new Date();
		var year=now.getFullYear();
		var month=now.getMonth()+1;
		var day=now.getDate();
		var hours=now.getHours();
		var minutes=now.getMinutes();
		var seconds=now.getSeconds();
		var Week = ['日','一','二','三','四','五','六'];  
		var weekday = Week[now.getDay()];   
		document.all.show.innerHTML = ""+year+"年"+month+"月"+day+"日  星期" + weekday+" ";
		var timeID=setTimeout(showTime,1000);
	}
	function jsddm_open(){	
		jsddm_canceltimer();
		jsddm_close();
		ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
	}

	function jsddm_close(){	
		if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
	}

	function jsddm_timer(){	
		closetimer = window.setTimeout(jsddm_close, timeout);
	}

	function jsddm_canceltimer(){	
		if(closetimer){	
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	}
	$(document).ready(function(){
		//表示id为jsddm下面的子集li，可以调用鼠标移动事件    具体讲解可以参考http://blog.csdn.net/wu920604/article/details/53943069
		$('#jsddm > li').bind('mouseover', jsddm_open);
		$('#jsddm > li').bind('mouseout',  jsddm_timer);
		$('#jsddm2 > li').bind('mouseover', jsddm_open);
		$('#jsddm2 > li').bind('mouseout',  jsddm_timer);
		});

	document.onclick = jsddm_close;
	//-->
</script>
 <body  xmlns="" οnlοad="showTime()">
<div class="nav_l"></div>
<div class="nav_c">
  <ul id="jsddm">
  <li class="current"><a href="/">首 页 </a></li>
  <li><a target="_blank" href="#">中心简介</a>
  <ul>
    <li><a href="#">中心介绍</a></li>
	<li><a href="#">领导信息</a></li>
    <li><a href="#">组织机构</a></li>
    <li><a href="#">中心职能</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  </li>
  <li><a target="_blank" href="#">政务公开</a>
  <ul>
    <li><a href="#">通知公告</a></li>
    <li><a href="#">中心动态</a></li>
    <li><a href="#">图片新闻</a></li>
    <li><a href="#">党务公开</a></li>
	<li><a href="#" style="width: 120px;">政府信息公开目录</a></li>
	<li><a href="#">五公开</a></li>
	<li><a href="#">人事信息</a></li>
  </ul>
  </li>
  <li><a target="_blank" href="#">交易信息</a>
  <ul>
    <li><a href="#">政府采购</a></li>
    <li><a href="#">建设工程</a></li>
    <li><a href="#">土地与矿业权</a></li>
    <li><a href="#">产权交易</a></li>
  </ul>
  </li>
  <li><a target="_blank" href="#">政策法规</a>
  <ul>
    <li><a href="#">综合法规</a></li>
    <li><a href="#">政府采购</a></li>
    <li><a href="#">建设工程</a></li>
    <li><a href="#">土地与矿业权</a></li>
    <li><a href="#">产权交易</a></li>
  </ul>
  </li>
  <li><a target="_blank" href="#">办事指南</a>
  <ul>
    <li><a href="#">建设工程</a></li>
  </ul>
  </li>
  <li><a target="_blank" href="#">专题专栏</a></li>
  <li><a target="_blank" href="#">下载专区</a></li>
</ul>
<div class="clear"></div>
<div class="nav_d"><span class="l"><marquee width="500" scrollamount="2">欢迎欢迎，热烈欢迎        <label id="show">显示时间</label></marquee></span><span class="r">
<div class="clear"></div>
</span></div>
</div>
</div>
 </body>
</html>


开着拖拉机的梦想家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
日期下拉菜单select
01-31
年月日三级联动下拉菜单 可设置默认值
下拉列表显示时间
gghwcf的专栏
09-07 1164
整合了下网上资料，弄了个自己的方法，可以参考下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 无标题文档 年 1 2 3 4 5 6 7 8 9 10 11 12 月 function
JavaScript 显示当前日期
hyxs的专栏
10-25 6392
New Document    function showweek() // 显示中文星期 {now = new Date() //定义新对象，new具有Date的性质   if (now.getDay() == 0) return ("星期一")   if (now.getDay() == 1) return ("星期二")   if (now.getDay() == 2) return ("
JS实现web页面的导航栏时间与本地同步，实时更新！
小小帅码农的博客
10-11 2300
需求：想要在web页面的导航栏实现一个时间同步展示的效果，如下图： 开始想的是引用一个插件，后又觉的繁琐，麻烦！就找到了这个方法： toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并将结果格式化之后返回！ setInterval("document.getElementById('webTime'
效果好看的时间跟随导航分类栏
妖精の羽翼的博客
05-04 799
在很多网页中我们会遇到需要跟随的悬浮导航栏，今天小妖同学就跟大家分享一个作品（虽然原理比较简单，但是个人认为效果蛮好看的），希望大家喜欢~ 下图是他的长相 大家可以想想看，这个样式的导航栏加上什么样子的效果比较好看一些，这是我的做法，是否和你想法一致呢？ 有没有觉着这个效果加上左侧的线条和圆点很好看呢，感觉圆点在线上滑动着~下面就是实现的具体代码（1）H...
jQuery简洁下拉菜单导航特效代码
03-20
**jQuery 简洁下拉菜单导航特效代码详解** 在网页设计中，下拉菜单是一种常见的导航结构，它能够有效地组织大量链接，提高用户体验。jQuery 是一个轻量级的 JavaScript 库，它提供了丰富的功能和简便的 API，使得...
jQuery实现的简洁下拉菜单导航效果代码
11-22
本文实例讲述了jQuery实现的简洁下拉菜单导航效果。分享给大家供大家参考。具体如下： 这里使用jQuery实现简洁下拉菜单导航效果，代码规范，兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+...
jQuery鼠标滑过导航下拉菜单特效
06-05
一款外观十分简洁好看的jQuery鼠标滑过导航下拉菜单特效，鼠标滑过一级导航菜单时，带过渡动画展开二级子菜单，鼠标悬停子菜单也会有简单的缩进动画效果，而且子菜单是多行多列形式布局，可以展示非常多的子菜单项。
jQuery简洁下拉菜单导航.zip
07-04
"jQuery简洁下拉菜单导航"就是一个实现这一功能的实例，它利用JavaScript库jQuery创建了一个直观且用户友好的交互式菜单。这个压缩包包含了必要的文件来展示这一效果，包括HTML结构、CSS样式以及JavaScript代码。 ...
jquery鼠标悬停滑动下拉导航菜单效果.zip
07-11
这在创建下拉菜单时尤为重要，因为我们需要在鼠标悬停时显示下拉菜单，而在鼠标离开时隐藏它。 3. **CSS操作（CSS Manipulation）**：jQuery可以方便地改变元素的样式，如`$(element).css("property", "value")`...
时间下拉选择css_面试官让我用纯css做一个下拉菜单，一分钟搞定！！
weixin_35802571的博客
01-20 396
导语：这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是我发现很多人却没能够做出来，最后只能勉强用js做出来。实话实说，我很震惊，这个功能实现起来很简单，甚至可以说是入门题目，怎么这么多人不会呢？所以今天来个面试干货，带大家直接手撸css做下拉菜单。还是一样，话不多说，直接上效果图。1，一个按钮，没点击前（手机端）或者鼠标没指向时（pc端）2，点击后，或者鼠标指向后。就能够显示下...
移动端控制上滑导航条消失，下滑出现
qq_40001322的博客
07-12 3575
var p = 0, t = 0; //上下滚动时隐藏导航栏 $(window).scroll(function(e){ //下滑 p =$(this).scrollTop(); if(t &lt; p &amp;&amp; p !==0){ $('.my-nav-footer').slideUp('fast'); ...
导航下拉菜单被遮住或显示不全问题所在和解决办法
热门推荐
FireBird_one的博客
12-21 1万+
导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。 一、导航下拉菜单被遮住，那是因为层叠关系错误 我们必须理解层叠关系满足的2个条件： 1、必须是同级；2、二者分别设定了position:relative 或 absolut
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
蔡婷的博客
02-26 1万+
使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~ 首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成
jsp 导航栏显示日期和星期几
VSILENCE的博客
03-17 4577
通过js可以实现jsp页面显示动态时间+星期几 1.jsp代码 function getTime(){ //获取系统日期 var now =new Date(); //月 var month=now.getMonth()+1; //星期 var week =now.getDay(); var s =""; switch
jQuery特效大全：导航、菜单与更多
其中，导航类特效是重点，列举了多种不同的实现方式，如Horizontal Accordion、jQuery Horizontal Accordion插件、Accordion Menu、模仿EXT的Tab选项卡、性感下拉菜单、滑动jQuery菜单教程、动画下拉菜单、jQuery UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值