jquery+css3实现交互式win8风格导航菜单点击可放大内容

最新推荐文章于 2022-12-04 10:56:14 发布
最新推荐文章于 2022-12-04 10:56:14 发布
阅读量415 收藏
点赞数 
<!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="citycontent-Type" citycontent="text/html; charset=utf-8" />
<citytitle>jquery+css3交互式WIN 8风格导航菜单</citytitle>
<link rel="stylesheet" href="css/css.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]> 
		<script src="js/main.js"></script>
	<![endif]-->
</head>
<body>
<ul class="citybox">
  <li tabindex="1"> <span class="citytitle">One</span>
    <div class="citycontent">1</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Two</span>
    <div class="citycontent">2</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Three</span>
    <div class="citycontent">3</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Four</span>
    <div class="citycontent">4</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Five</span>
    <div class="citycontent">5</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Six</span>
    <div class="citycontent">6</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Seven</span>
    <div class="citycontent">7</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Eight</span>
    <div class="citycontent">8</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Nine</span>
    <div class="citycontent">9</div>
  </li>
   <li tabindex="1"> <span class="citytitle">Seven</span>
    <div class="citycontent">10</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Eight</span>
    <div class="citycontent">11</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Nine</span>
    <div class="citycontent">12</div>
  </li>
   <li tabindex="1"> <span class="citytitle">Seven</span>
    <div class="citycontent">13</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Eight</span>
    <div class="citycontent">14</div>
  </li>
  <li tabindex="1"> <span class="citytitle">Nine</span>
    <div class="citycontent">15</div>
  </li>
</ul>
<script>
	  (function(){
	  
		// Append a close trigger for each block
		$('.citybox .citycontent').append('<span class="close">x</span>');		
		// Show window
		function showcitycontent(elem){
			hidecitycontent();
			elem.find('.citycontent').addClass('cityexpanded');
			elem.addClass('cover');	
		}
		// Reset all
		function hidecitycontent(){
			$('.citybox .citycontent').removeClass('cityexpanded');
			$('.citybox li').removeClass('cover');		
		}
		
		// When a li is clicked, show its citycontent window and position it above all
		$('.citybox li').click(function() {
			showcitycontent($(this));
		});		
		// When tabbing, show its citycontent window using ENTER key
		$('.citybox li').keypress(function(e) {
			if (e.keyCode == 13) { 
				showcitycontent($(this));
			}
		});

		// When right upper close element is clicked  - reset all
		$('.citybox .close').click(function(e) {
			e.stopPropagation();
			hidecitycontent();
		});		
		// Also, when ESC key is pressed - reset all
		$(document).keyup(function(e) {
			if (e.keyCode == 27) { 
			  hidecitycontent();
			}
		});
		
	  })();
	</script>
</body>
</html>

qujingxu_1987
关注
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
基于jQuery的Win8 Metro风格的html导航模板
05-20
基于jQuery的Win8 Metro风格的html导航模板
使用Jquery实现Win8开始菜单效果的站点导航
weixin_30457881的博客
10-19 72
前言: 本人是个Metro控,自我感觉到处都充斥着Metro的元素,个人认为这种风格强调表现以及内容,以简洁著称,不过也不是大部分都喜欢,也有一些人和你讨厌这种风格~不过本人非常喜欢这种风格,看我博客的风格就知道了,嘿嘿,也正在用wp8的手机lumia920,win8刚出来的时候对开始菜单也比较喜欢,不过有点不习惯,无意间看到了这个网站导航,有一段时间研究过他的源码,无奈前段知识捉襟见肘...
jquery实现动态菜单
jubincn的专栏
08-23 6706
jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多，都是采用JavaScript操作css的方式。其具体步骤可以分为以下几步：创建一个含有要表达的菜单的html页面 jquery示例2：jquery菜单 我是菜单1 我是子菜单1
jQuery和CSS3实现Windows8样式布局带动画
ICode联盟
12-04 83
下载地址 一款jQuery和CSS3实现Windows8无规则布局，点击每个块显示大层带动画效果。 dd:
jQuery 实现页面交互逻辑
qq_40132294的博客
02-27 1881
jQuery是一个使用最广泛的javascript的函数库，在页面中使用<script>标签引入js文件即可使用。 <script type="text/javascript" src="xxxx/min.js"> jQuery在线手册：https://www.runoob.com/manual/jquery jquery用法思想：选择某个网页元素，然后对他进行操作。 一。jQuery选择器 $代表jquery id选择器 $('#id属性值'） c......
前端追梦人CSS教程
ilovethesunshine的博客
11-09 710
一. 基础概念 1.1 什么是CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 1.2 语法 选择器 { color: blue; font-size: 12p; } 1.3 选择器 根据规则选取页面中的dom元素, 包含以下选择器分类: .class .intro 选择所有class=“intro”的元素 1 #id #firstname 选
分享996个实用的JavaScript特效你要的全在这里
weixin_47730343的博客
05-31 2803
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
jquery win8风格图标导航菜单特效
11-21
本篇文章将详细讲解如何利用jQuery实现Windows 8风格的图标导航菜单特效，以及相关的技术要点。 Windows 8的界面设计引入了一种全新的扁平化、磁贴式的风格，这种风格在导航菜单上表现为大块的彩色图标和简洁的文字...
网友康松分享仿Win8布局+lightbox弹出层插件显示页面
10-31
例如，可以将磁贴设计用于导航菜单，每个磁贴点击后通过lightbox展示详细内容，如文章预览、视频播放或者产品详情。这样既保持了页面的整洁，又能在需要时提供丰富的信息。 在文件"20130429101641191"中，可能包含...
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
JAVA+access综合测评系统毕业设计(源代码+论文+开题报告+任务书).zip
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
33企业财务风险分析及防范——以永辉超市股份有限公司为例.docx
09-12
33企业财务风险分析及防范——以永辉超市股份有限公司为例
JAVA物业管理系统设计与实现(论文+源代码).zip
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
基于springboot的车辆充电桩管理系统设计与实现.docx
09-12
基于springboot的车辆充电桩管理系统设计与实现.docx
weixin196运动健康小程序SpringBoot.rar
最新发布
09-12
所有源码都可以运行成功
开家可乐店bcm4文件
09-12
此文件请下载源码编辑器后再使用，否则无法打开，请尽量不要更改源代码，因为此文件更改代码后可能功能不同，版本号：v2.1
CSS3与jQuery实现Windows 8方格导航菜单效果
"用CSS3实现Win8风格的方格导航菜单效果" 在网页设计中，创建吸引用户的交互式元素是提升用户体验的关键。这个资源讲述了如何利用CSS3和jQuery来实现Windows 8风格的方格导航菜单。这种菜单设计具有独特的视觉效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值