用css3样式实现的滑动导航菜单，html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3 Minimalistic Navigation Menu | Tutorialzine demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<h1>CSS3 Minimalistic Navigation Menu</h1>

<h2><a href="http://www.100sucai.com">Read the tutorial on Tutorialzine »</a></h2>

<div id="main">

  <ul id="navigationMenu">

    <li> <a class="home" href="http://www.100sucai.com"> <span>Home</span> </a> </li>

    <li> <a class="about" href="http://www.100sucai.com"> <span>About</span> </a> </li>

    <li> <a class="services" href="http://www.100sucai.com"> <span>Services</span> </a> </li>

    <li> <a class="portfolio" href="http://www.100sucai.com"> <span>Portfolio</span> </a> </li>

    <li> <a class="contact" href="http://www.100sucai.com"> <span>Contact us</span> </a> </li>

  </ul>

</div>

</body>

</html>

　　

效果图：

演示及下载

通过css3实现的动画导航菜单代码的更多相关文章

  1. 纯css3实现的动画导航菜单

    测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...

  2. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  3. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  4. 一款纯css3实现的环形导航菜单

    之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览  ...

  5. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  7. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  8. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  9. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

随机推荐

  1. PHP LDAP 目录协议函数库

    在 LDAP 的协议之中,很像硬盘目录结构或倒过来的树状结构.LDAP 的根就是全世界,第一级是属于国别 (countries) 性质的层级,之后可能会有公司 (organization) 的层级,接 ...

  2. Git使用详细教程(2)：配置用户名和邮箱

    首先,说下最常用的设置用户名和邮箱的命令 git config --global user.name 'xxx' //设置用户名 git config --global user.email 'xxx ...

  3. Oracle SQL调优记录

    目录 一.前言 二.注意点 三.Oracle执行计划 四.调优记录 @ 一.前言 本博客只记录工作中的一次oracle sql调优记录,因为数据量过多导致的查询缓慢,一方面是因为业务太过繁杂,关联了太 ...

  4. RIPng配置（第十三组）

    拓扑如下 配置rip指令和ipv6包允许路由指令以r1为例 在r1上配置拓扑上对应网段的ip,r1上两个连接路由器的端口手动设置ip,同网段的路由器端口ip自动获取. r2配置 r3 配置完后查看路由 ...

  5. sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD

    一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用.   这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...

  6. Android--UI之Fragment

    前言 开门见山开篇名义,本篇博客将讲解一下Android中Fragment的内容,必要的地方会提供相应的演示代码,并且会在最后给出源码下载. 本文主要有以下内容: 什么是Fragment 如何创建一个 ...

  7. VisualVM远程连接Tomcat

    最近项目已经要提测了,有时间来考虑一些性能上的事儿了.之前拜读过<深入理解java虚拟机>,只可惜当时功力尚浅,有些东西还是不太懂,而且应用场景也没有,所以借这次机会看看.当然了,这次并不 ...

  8. 【原创】为什么浮点数1e38f + 1 - 1e38f等于0

    1. 问题 为什么1e38f + 1 - 1e38f为0? 2. 分析 ; //00 00 00 02 int *pii = &ii; float i = 1e38f; //7e 96 76 ...

  9. React 中无用但可以装逼的知识

    最近看了Dan Abramov的一些博客,学到了一些React的一些有趣的知识.决定结合自己的理解总结下.这些内容可能对你实际开发并没有什么帮助,不过这可以让你了解到更多React底层实现的内容以及为 ...

  10. [总结] wqs二分学习笔记

    论文 提出问题 在某些题目中,强制规定只能选 \(k\) 个物品,选多少个和怎么选都会影响收益,问最优答案. 算法思想 对于上述描述的题目,大部分都可以通过枚举选择物品的个数做到 \(O(nk^2)\ ...