一个简单的网站导航效果:

效果案例:查看演示

css:

 *{margin:;padding:;border:;}
body{font-family: arial, 宋体, serif;font-size: 12px;}
.menu{width:1170px;margin:0 auto;height:24px;}
#nav{line-height: 24px;list-style-type: none;background: #666;}
#nav a{display: block;width: 80px;text-align: center;}
#nav a:link{color: #666;text-decoration: none;}
#nav a:visited{color: #666;text-decoration: none;}
#nav a:hover{color: #FFF;text-decoration: none;font-weight: bold;}
#nav li{float: left;width: 80px;background: #CCC;}
#nav li.on{background: #999;}
#nav li a:hover{background: #999;}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:;content:" ";clear:both;height:;}
.clearfix{*zoom:;}

body:

 <div class="menu">
<ul id="nav" class="clearfix">
<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>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>

js:

 $("#nav li").click(function () {
$(this).siblings().removeClass("on")
$(this).addClass("on");
}).eq(0).click();

css网站导航-菜单的更多相关文章

  1. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  2. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  4. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  5. 顶 企业站常用css横向导航菜单

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  8. CSS自适应导航菜单

    以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...

  9. css之导航菜单的制作

    通过设置<a>的背景改变样式,通过a:hover改变交互效果,改变文字颜色color 纵向 <!DOCTYPE html> <html> <head lang ...

随机推荐

  1. C# 实体model验证输出

    新建Model实体: [Required(ErrorMessage = @"地址 1 为必填项!")] [StringLength(, ErrorMessage = @" ...

  2. 【原】Object 异常静态

    //所有的类都继承Object类: Object a=; Object b="ddfasfda"; //正常情况下,都会省略掉:Object:但实际上是存在的: class tes ...

  3. A-Frame 简介03

    如果你想开始使用A-Frame可以通过以下几种方式: Play with CodePen Grab the Boilerplate Include the JS Build Install from ...

  4. Javascript常见全局函数

      ØdecodeURI() 解码某个编码的 URI ØencodeURI() 把字符串编码为 URI ØdecodeURIComponent() 解码一个编码的 URI 组件 ØencodeURIC ...

  5. 002.TPerlRegEx简单测试

    我要做什么? 将一个字符串中的所有连续的数字替换成一个* 代码: program Project1; {$APPTYPE CONSOLE} uses System.SysUtils, PerlRegE ...

  6. 【gradle】 入门

    robin@robin-PC2 /D/JavaWorkSpace/payment/alipay-wap (master)$ ./gradlew idea

  7. skip-grant-tables:非常有用的mysql启动参数

    skip-grant-tables:非常有用的mysql启动参数   介绍一个非常有用的mysql启动参数—— --skip-grant-tables.顾名思义,就是在启动mysql时不启动grant ...

  8. 华为机试题——数组排序,且奇数存在奇数位置,偶数存在偶数位置

    题目要求很简单,就是给你一个数组,对它进行排序,并且排序后,奇数要放在奇数的位置上,偶数要放在偶数的位置上,如果不满足这个规则的话就在数组上填充0 实现代码如下,文中值得注意的一点就是如何判读这个数字 ...

  9. ECSHOP安装或使用中提示Strict Standards: Non-static method cls_image:

    随着ECSHOP的不断发展,越来越多的人成为了ECSHOP的忠实粉丝.由于每个人的服务器环境和配置都不完全相同,所以ECSHOP也接二连三的爆出了各种各样的错误信息.相信不少新手朋友在ECSHOP安装 ...

  10. 机器学习算法与Python实践之(四)支持向量机(SVM)实现

    机器学习算法与Python实践之(四)支持向量机(SVM)实现 机器学习算法与Python实践之(四)支持向量机(SVM)实现 zouxy09@qq.com http://blog.csdn.net/ ...