用 CSS3 创建一个漂亮的多种色彩的菜单
1. [图片] thumb.png
2. [代码][HTML]代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 multicolor menu | Script Tutorials</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>CSS3 multicolor menu</h2>
<a href="http://www.script-tutorials.com/css3-multicolor-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<span id="red"></span>
<span id="orange"></span>
<span id="pink"></span>
<span id="green"></span>
<span id="blue"></span>
<span id="indigo"></span>
<span id="violet"></span>
<span id="grey"></span>
<div class="colorScheme">
<a href="#red" class="red"></a>
<a href="#orange" class="orange"></a>
<a href="#pink" class="pink"></a>
<a href="#green" class="green"></a>
<a href="#blue" class="blue"></a>
<a href="#indigo" class="indigo"></a>
<a href="#violet" class="violet"></a>
<a href="#grey" class="grey"></a>
</div>
<ul id="nav">
<li><a href="http://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.script-tutorials.com/css3-multicolor-menu/">Back</a></li>
</ul>
</div>
</body>
</html>
3. [代码]css/menu.css
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
display: table;
padding: 10px;
position: relative;
}
#nav ul {
background-color: red;
border:1px solid red;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
padding: 20px 0 10px;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}http://www.huiyi8.com/gongwen/
#nav li {公文写作
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
font-size: 16px;
padding: 7px 20px;
text-decoration: none;
}
#nav li:hover > a {
background-color: red;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
}
#nav li:hover > a.hsubs {
border-radius: 5px 5px 0 0;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
}
#nav ul li {
width: 100%;
}
#nav ul li:hover > a {
background-color: #222222 !important;
border-radius: 5px 5px 5px 5px;
}
/* colors */
.colorScheme {
height: 32px;
list-style: none outside none;
margin: 0 auto 25px;
width: 320px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px;
width: 30px;
}
.colorScheme .red {
background-color: red;
}
.colorScheme .orange {
background-color: orange;
}
.colorScheme .pink {
background-color: pink;
}
.colorScheme .green {
background-color: green;
}
.colorScheme .blue {
background-color: blue;
}
.colorScheme .indigo {
background-color: indigo;
}
.colorScheme .violet {
background-color: violet;
}
.colorScheme .grey {
background-color: grey;
}
#red:target ~ #nav ul {
background-color: red;
border: 1px solid red;
}
#orange:target ~ #nav ul {
background-color: orange;
border: 1px solid orange;
}
#pink:target ~ #nav ul {
background-color: pink;
border: 1px solid pink;
}
#green:target ~ #nav ul {
background-color: green;
border: 1px solid green;
}
#blue:target ~ #nav ul {
background-color: blue;
border: 1px solid blue;
}
#indigo:target ~ #nav ul {
background-color: indigo;
border: 1px solid indigo;
}
#violet:target ~ #nav ul {
background-color: violet;
border: 1px solid violet;
}
#grey:target ~ #nav ul {
background-color: grey;
border: 1px solid grey;
}
#red:target ~ #nav li:hover > a {
background-color: red;
}
#orange:target ~ #nav li:hover > a {
background-color: orange;
}
#pink:target ~ #nav li:hover > a {
background-color: pink;
}
#green:target ~ #nav li:hover > a {
background-color: green;
}
#blue:target ~ #nav li:hover > a {
background-color: blue;
}
#indigo:target ~ #nav li:hover > a {
background-color: indigo;
}
#violet:target ~ #nav li:hover > a {
background-color: violet;
}
#grey:target ~ #nav li:hover > a {
background-color: grey;
}
用 CSS3 创建一个漂亮的多种色彩的菜单的更多相关文章
- 如何使用CSS3创建一个漂亮的图标
演示 下载 今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 ...
- 怎样使用纯CSS3创建一个简单的五角星图形
我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五 ...
- 如何创建一个非常酷的3D效果菜单
http://www.cocoachina.com/ios/20150603/11992.html 原文地址在这里.原文 去年,读者们投票选出了Top5的iOS7最佳动画,当然也很想看到有关这些动画如 ...
- css3制作一个漂亮的按钮
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69
- css3创建一个上下线性渐变色背景的div
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- PS网页设计教程XXIV——从头设计一个漂亮的网站
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- Ionic-wechat项目边开发边学（一）：环境搭建和创建一个项目
之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...
- 一个漂亮而强大的RecyclerView
代码地址如下:http://www.demodashi.com/demo/13470.html 简介 主要提供了简单易用强大的RecyclerView库,包括自定义刷新加载效果.极简通用的万能适配器A ...
随机推荐
- JAVA版SqlHelper
//JAVA版SqlHelper package com.test.Dao; import java.sql.Connection; import java.sql.DriverManager; im ...
- Jmeter拓展插件（jmeter-plugins)
Jmeter是一款开源的性能测试工具,纯java编写,体积小,功能强大,基本可以满足性能测试需求.另Jmeter还右一系列的插件来增强其功能,插件地址jmeter-plugins.org.插件现在有5 ...
- IIS7设置默认页
一般用ASP.NET创建的网站默认页都是Default.aspx,不需要设置. 但是如果有网站的起始页不是Default.aspx,就需要在IIS里设置了. IIS7的设置方法和IIS6的不一样: 在 ...
- web安全之SQL注入---第五章 如何预防SQL注入 ？
5-1严格检查输入变量的类型和格式总结:其实就是做一些判断正则表达式:验证密码:/^[a-zA-Z]{6,}$/5-1严格检查输入变量的类型和格式总结:其实就是做一些判断正则表达式:验证密码:/^[a ...
- C语言基础知识【数组】
2017年7月11日17:34:05C 数组1.C 语言支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量.数组的声明并不 ...
- window下python安装pip
python3.5 1.cmd下运行python -m pip install -U pip 2.Path添加python安装目录下的\Scripts,有pip.exe文件 3.重新打开cmd ...
- JavaEE应用基础平台 AOS-V0.1 RELEASED
写在最前面 AOS是一个有着悠久历史传承和发扬的平台.她的前世G4Studio自2010年公布V1.0版本号以来,先后经过多次版本号更新.并得到了一些小伙伴的认可和使用.但我们希望做得更好,走得更远. ...
- 【BZOJ3105】[cqoi2013]新Nim游戏 贪心+线性基
[BZOJ3105][cqoi2013]新Nim游戏 Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个 ...
- 我的Android进阶之旅------>Android无第三方Jar包的源代报错：The current class path entry belongs to container ...的解决方法
今天使用第三方Jar包afinal.jar时候,想看一下源代码,无法看 然后像添加jar对应的源码包,也无法添加相应的源代码,报错如下:The current class path entry bel ...
- CentOS7.x 报错 There are no enabled repos.
地址 :http://mirrors.163.com/centos/7/os/x86_64/Packages/ wget http://mirrors.163.com/centos/7/os/x8 ...