一个不错的动感导航菜单

<style>
dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;}

dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;}

dd{margin:0;border-bottom:1px solid #fff;}
a{display:block;background:url(arrow.gif) no-repeat 10px 10px;color:#fff;text-decoration:none;padding:5px 0px 5px 20px;font:12px/1.5em arial;}
a:hover{color:#fcc;background:url(arrow.gif) no-repeat 11px 10px;}

</style>
<div id="menu">
<dl id="gallery">
<dt>Art Gallery</dt>
<dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>
<dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>
<dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>
<dd><a href="#" title="William Turner">William Turner</a></dd>
<dd><a href="#" title="John Constable">John Constable</a></dd>
<dd><a href="#" title="Claude Monet">Claude Monet</a></dd>
</dl>
</div>
效果演示

dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;}

dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;}

dd{margin:0;border-bottom:1px solid #fff;}
a{display:block;background:url(arrow.gif) no-repeat 10px 10px;color:#fff;text-decoration:none;padding:5px 0px 5px 20px;font:12px/1.5em arial;}
a:hover{color:#fcc;background:url(arrow.gif) no-repeat 11px 10px;}

Art Gallery
Paul Cezanne
Henri Matisse
Vincent van Gogh
William Turner
John Constable
Claude Monet

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 一个不错的动感导航菜单

    <style> dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;} dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;} dd{margi

  • 自己做一款不错的二级导航菜单

    多级导航菜单 /* ::::: css ::::: */ strong { font-style: normal; font-weight: normal; font-weight: bold; } a { cursor: pointer; text-decoration: none; } #container { width: 960px; margin: 0pt auto; } #nav, .nav-container, .nav-container ul, #nav .nav-master

  • 一个js控制的导航菜单实例代码

    这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: 复制代码 代码如下: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPa

  • javascript实现的又一个不错的滑动导航效果

    导航,鼠标放上去看看效果 ::你会做,我也要会:: function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all)

  • 一个不错的渐显菜单

    由于此菜单不易灵活改动,图片量又大,要改栏目和增删栏目特麻烦,得须改图片.        因对本人对此菜单做了大量改动,最终达到的效果是一样        原网站那个菜单加上图片有80多k呢,经修改过后的菜单加上图片大小只有4k左右,改了过后是不是小了很多呢.        改动后的优点,便于修改栏目名称,和增删栏目,图片量减少,无论多少栏目只需两张图片.        熟悉js的人还可以把它改得更简单方便呢,不过我对js还不够了解,所以就等高手改更简单的效果吧! 补充一点: 这个效果在FF下不

  • 第九篇Bootstrap导航菜单创建步骤详解

    创建一个标签式的导航菜单的步骤是: •在ul标签上加上class  nav •再ul标签上加上 class .nav-tabs. 在li标签上加上 active表示激活该项 <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">

  • JS实现黑色大气的二级导航菜单效果

    本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  • jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes

  • jquery实现个人中心导航菜单效果和美观都非常不错

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 源码下载 一起看下实现的代码: html代码: <nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa fa-user

  • jquery动感漂浮导航菜单代码分享

    这是一款基于jquery实现动感漂浮导航菜单的特效代码,菜单可以上下浮动,动感十足,为自己的网站增加了活力,是一款非常实用的导航菜单特效源码. 运行效果图: 点击下载源码 为大家分享的jquery动感漂浮导航菜单代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Floating Menu<

随机推荐