用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. Android之.9图的知识

    Android之.9图的知识 .9图的介绍 .9图也称为pPatch图,它是android app开发里一种特殊的图片形式,文件的扩展名为:.9.png. 9patch图片的作用就是在图片拉伸的时候保 ...

  2. JS 实现触发下载内容(H5 download)

    概述 我对使用js控制下载非常感兴趣,在网上查资料的时候碰巧看到了相关实现方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: JS前端创建html或json文件并浏览器导出下载 理解DO ...

  3. muduo-ThreadLocal实现细节——阻止销毁未定义对象

    muduo利用pthread_key_t实现ThreadLocal模板类. 具体代码如下所示: template<typename T> class ThreadLocal : nonco ...

  4. LeetCode20：validParentheses

    validParentheses 题目描述 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  5. freemarker常见语法大全，灰常有用！

    由于公司前端使用的技术是freemarker,于是没事就在网上看看别人写的关于freemarker的文章,感觉freemarker灰常简单,比jsp好用,jsp太乱太臃肿了,另外推荐大家看看freem ...

  6. spring cloud+.net core搭建微服务架构：服务注册（一）

    背景 公司去年开始使用dotnet core开发项目.公司的总体架构采用的是微服务,那时候由于对微服务的理解并不是太深,加上各种组件的不成熟,只是把项目的各个功能通过业务层面拆分,然后通过nginx代 ...

  7. 【杂谈】没有公网IP的电脑如何与外部通信

    前言 前几天突然想到的问题,自己先猜测推理了一番,最后在谢希仁版<计算机网络>找到了权威的解答.这里记录一下自己的思考过程. 网站是如何找到我们的? 我们知道,互联网中的两台电脑要进行通信 ...

  8. MyBatis源码解析（二）——Environment环境

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6625612.html 本应该先开始说Configuration配置类的,但是这个类有点过于 ...

  9. npm设置和查看仓库源

    转载请注明出处:https://www.cnblogs.com/wenjunwei/p/10078460.html 在使用npm命令时,如果直接从国外的仓库下载依赖,下载速度很慢,甚至会下载不下来,我 ...

  10. 深入理解 Java 动态代理机制

    Java 有两种代理方式,一种是静态代理,另一种是动态代理.对于静态代理,其实就是通过依赖注入,对对象进行封装,不让外部知道实现的细节.很多 API 就是通过这种形式来封装的. 代理模式结构图(图片来 ...