CSS自定义带动画导航条

图形：

css代码:

/* ================================================================

This copyright notice must be kept untouched in the stylesheet at

all times.

Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

a, a:visited, a:hover, a:active {}

.nav, .nav ul {padding:0; margin:0; list-style:none;}

.nav {margin:0 auto; position:relative; width:700px; height:52px;}

.nav div div {position:absolute; left:0; height:0; width:700px;}

.nav ul {position:absolute; left:0; bottom:0;}

.nav li {float:left; margin-top:26px;}

.nav li.pad2 {position:absolute; left:0; top:0; width:700px; height:26px; background:url(back.gif) left bottom; z-index:10;}

.nav li li {margin-top:0;}

.nav a {display:block; position:relative; height:26px; line-height:26px; display:block; font-family:verdana, sans-serif; font-size:11px; text-decoration:none;  color:#fff; font-weight:bold; outline:0;}

.nav a.top-a {z-index:10; min-width:1px; padding:0 15px; background:url(trans.gif);}

* html .nav a.top-a {width:1px;}

.nav ul a {float:left; font-weight:normal;}

.nav ul a.sub {padding:0 15px;}

.nav ul a.pad b {position:absolute; left:0; height:26px; display:block; width:700px; cursor:default;  background:url(back.gif) left top;}

.nav li:hover > a {color:#cf6;}

.nav a.top-a:hover,

.nav a.top-a:active,

.nav a.top-a:focus {margin-bottom:-26px; color:#cf6;}

.nav ul a:hover,

.nav ul a:active,

.nav ul a:focus {padding-bottom:26px; color:#cf6;}

再弄两个git图片：back.gif和trans.gif

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" xml:lang="en">

<head>

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

<title> Showup </title>

<link rel="stylesheet" media="all" type="text/css" href="showup/showup.css" />

</head>

<body>

<h2>‘Showup‘ menu - just (X)HTML &amp CSS</h2>

<h3>22nd January 2010</h3>

<ul class="nav">

<li class="pad2"></li>

<li><a class="top-a" href="#x">HOME</a></li>

<li><a class="top-a" href="#x">PRODUCTS</a>

<div><div>

<ul>

<li><a class="pad" href="#x"><b></b></a></li>

<li><a class="sub" href="#x">Cameras</a></li>

<li><a class="sub" href="#x">Lenses</a></li>

<li><a class="sub" href="#x">Flashguns</a></li>

<li><a class="sub" href="#x">Tripods</a></li>

<li><a class="sub" href="#x">Filters</a></li>

<li><a class="sub" href="#x">Lens Adaptors</a></li>

</ul>

</div></div>

</li>

<li><a class="top-a" href="#x">SERVICES</a>

<div><div>

<ul>

<li><a class="pad" href="#x"><b></b></a></li>

<li><a class="sub" href="#x">Printing</a></li>

<li><a class="sub" href="#x">Servicing</a></li>

<li><a class="sub" href="#x">Repair</a></li>

<li><a class="sub" href="#x">Photo Editing</a></li>

<li><a class="sub" href="#x">Photo Framing</a></li>

</ul>

</div></div>

</li>

<li><a class="top-a" href="#x">SHOP</a>

<div><div>

<ul>

<li><a class="pad" href="#x"><b></b></a></li>

<li><a class="sub" href="#x">Online Shopping</a></li>

<li><a class="sub" href="#x">Mail Order</a></li>

<li><a class="sub" href="#x">Store Finder</a></li>

<li><a class="sub" href="#x">Second Hand and Refurbished Offers</a></li>

</ul>

</div></div>

</li>

<li class="right"><a class="top-a" href="#x">SPECIAL&nbsp;DEALS</a>

<div><div>

<ul>

<li><a class="pad" href="#x"><b></b></a></li>

<li><a class="sub" href="#x">Filters</a></li>

<li><a class="sub" href="#x">Tripods</a></li>

<li><a class="sub" href="#x">Flashguns</a></li>

<li><a class="sub" href="#x">Lenses</a></li>

<li><a class="sub" href="#x">Cameras</a></li>

</ul>

</div></div>

</li>

<li class="right"><a class="top-a" href="#x">CONTACT&nbsp;US</a>

<div><div>

<ul>

<li><a class="pad" href="#x"><b></b></a></li>

<li><a class="sub" href="#x">Email</a></li>

<li><a class="sub" href="#x">Post</a></li>

<li><a class="sub" href="#x">Fax</a></li>

<li><a class="sub" href="#x">Telephone</a></li>

<li><a class="sub" href="#x">SMS</a></li>

</ul>

</div></div>

</li>

</ul>

<p class="info">Copyright &copy;2010 stu nicholls - cssplay.co.uk</p>

</body>

</html>

最后都放在一起，直接打开html文件即可。

时间： 2024-10-03 09:44:24

CSS自定义带动画导航条的相关文章

三角形变形记之纯css实现的分布导航条效果

三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-size:13px; font-weight:bold; } li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px; text-align:cen

CSS了一个浮动导航条

绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd { margin:0; padding:0; border:0}ul,ol { list-style:none}body { background:#fff; font:12px/1.5 arial,sans-se

CSS——关于列表和导航条菜单之垂直菜单制作

导航条菜单,即左图所示.下面,将一一展开如何制作. 1.首先,制作一个垂直的项目菜单,用<ul><li>标签写出基本内容,然后在样式表里面用margin和padding去掉内外边距,用list-style属性去掉原有的项目符号,插入自己喜欢的项目符号,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

用CSS实现带动画效果的单选框

预览一下效果:http://1.huizit1.applinzi.com/CSS/singlebox2/singleRadio.html 布局结构为: 1 <div class="radio-1"> 2 <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> 3 <label for="

android 自定义带动画的统计饼图

闲来无事,发现市面上好多app都有饼图统计的功能,得空自己实现以下,菜鸟一只,求指教,轻喷!   基本要求: 在XML布局中可配置控件的属性. 遵守基本的安卓规范 View基本绘制原理: 首先计算View的大小,测量View的大小主要有三个: public final void measure(int widthMeasureSpec, int heightMeasureSpec) protected void onMeasure(int widthMeasureSpec, int height

html+css+js实现滑动导航条

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

使用css实现移动端导航条滚动

1 <div class="tab"> 2 <div class="table-item"> 3 <span class="tab-link">首页</span> 4 </div> 5 <div class="table-item"> 6 <span class="tab-link">时政</span> 7 &l

html+css自定义导航

利用css来编写的导航条,先看看效果: 代码区: html: <!--导航部分--> {block name="nav"} <nav> <div class="nav"> <ul> <li class="first"><a href="{:url('UserManage/index')}"><img src="__PUBLIC__/stat

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次