Team:SJTU-Software2/test

From 2014.igem.org

(Difference between revisions)
Line 7: Line 7:
<p>
<p>
 +
<style>
 +
#menu {
 +
font: 13px "trebuchet MS", Arial, Helvetica;
 +
}
 +
#menu a {
 +
color: #2A679F;
 +
}
 +
#menu, #menu ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
#menu {
 +
width: 960px;
 +
margin: 60px auto;
 +
border: 1px solid #222;
 +
background-color: #111;
 +
background-image: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background-image: -webkit-linear-gradient(#444, #111);
 +
background-image: -o-linear-gradient(#444, #111);
 +
background-image: -ms-linear-gradient(#444, #111);
 +
background-image: linear-gradient(#444, #111);
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
}
 +
#menu:before, #menu:after {
 +
content: "";
 +
display: table;
 +
}
 +
#menu:after {
 +
clear: both;
 +
}
 +
#menu {
 +
zoom: 1;
 +
}
 +
#menu li {
 +
float: left;
 +
border-right: 1px solid #222;
 +
-moz-box-shadow: 1px 0 0 #444;
 +
-webkit-box-shadow: 1px 0 0 #444;
 +
box-shadow: 1px 0 0 #444;
 +
position: relative;
 +
}
 +
#menu a {
 +
float: left;
 +
padding: 12px 30px;
 +
color: #999;
 +
text-transform: uppercase;
 +
font: bold 12px Arial, Helvetica;
 +
text-decoration: none;
 +
text-shadow: 0 1px 0 #000;
 +
}
 +
#menu li:hover > a {
 +
color: #fafafa;
 +
}
 +
*html #menu li a:hover {
 +
color: #fafafa;
 +
}
 +
#menu ul {
 +
margin: 20px 0 0 0;
 +
_margin: 0;
 +
opacity: 0;
 +
visibility: hidden;
 +
position: absolute;
 +
top: 38px;
 +
left: 0;
 +
z-index: 1;
 +
background: #444;
 +
background: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background: -webkit-linear-gradient(#444, #111);
 +
background: -o-linear-gradient(#444, #111);
 +
background: -ms-linear-gradient(#444, #111);
 +
background: linear-gradient(#444, #111);
 +
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 +
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
border-radius: 3px;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-ms-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out;
 +
}
 +
#menu li:hover > ul {
 +
opacity: 1;
 +
visibility: visible;
 +
margin: 0;
 +
}
 +
#menu ul ul {
 +
top: 0;
 +
left: 150px;
 +
margin: 0 0 0 20px;
 +
_margin: 0;
 +
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
}
 +
#menu ul li {
 +
float: none;
 +
display: block;
 +
border: 0;
 +
_line-height: 0;
 +
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
}
 +
#menu ul li:last-child {
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu ul a {
 +
padding: 10px;
 +
width: 130px;
 +
_height: 10px;
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
 +
}
 +
#menu ul a:hover {
 +
background-color: #0186ba;
 +
background-image: -moz-linear-gradient(#04acec, #0186ba);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 +
background-image: -webkit-linear-gradient(#04acec, #0186ba);
 +
background-image: -o-linear-gradient(#04acec, #0186ba);
 +
background-image: -ms-linear-gradient(#04acec, #0186ba);
 +
background-image: linear-gradient(#04acec, #0186ba);
 +
}
 +
#menu ul li:first-child > a {
 +
-moz-border-radius: 3px 3px 0 0;
 +
-webkit-border-radius: 3px 3px 0 0;
 +
border-radius: 3px 3px 0 0;
 +
}
 +
#menu ul li:first-child > a:after {
 +
content: '';
 +
position: absolute;
 +
left: 40px;
 +
top: -6px;
 +
border-left: 6px solid transparent;
 +
border-right: 6px solid transparent;
 +
border-bottom: 6px solid #444;
 +
}
 +
#menu ul ul li:first-child a:after {
 +
left: -6px;
 +
top: 50%;
 +
margin-top: -6px;
 +
border-left: 0;
 +
border-bottom: 6px solid transparent;
 +
border-top: 6px solid transparent;
 +
border-right: 6px solid #3b3b3b;
 +
}
 +
#menu ul li:first-child a:hover:after {
 +
border-bottom-color: #04acec;
 +
}
 +
#menu ul ul li:first-child a:hover:after {
 +
border-right-color: #0299d3;
 +
border-bottom-color: transparent;
 +
}
 +
#menu ul li:last-child > a {
 +
-moz-border-radius: 0 0 3px 3px;
 +
-webkit-border-radius: 0 0 3px 3px;
 +
border-radius: 0 0 3px 3px;
 +
}
 +
/* Mobile */
 +
#menu-trigger {
 +
display: none;
 +
}
 +
@media screen and (max-width: 600px) {
 +
/* nav-wrap */
 +
#menu-wrap {
 +
position: relative;
 +
}
 +
#menu-wrap * {
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
/* menu icon */
 +
#menu-trigger {
 +
display: block;
 +
height: 40px;
 +
line-height: 40px;
 +
cursor: pointer;
 +
padding: 0 0 0 35px;
 +
border: 1px solid #222;
 +
color: #fafafa;
 +
font-weight: bold;
 +
background-color: #111;
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
}
 +
/* main nav */
 +
#menu {
 +
margin: 0;
 +
padding: 10px;
 +
position: absolute;
 +
top: 40px;
 +
width: 100%;
 +
z-index: 1;
 +
background-color: #444;
 +
display: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu:after {
 +
content: '';
 +
position: absolute;
 +
left: 25px;
 +
top: -8px;
 +
border-left: 8px solid transparent;
 +
border-right: 8px solid transparent;
 +
border-bottom: 8px solid #444;
 +
}
 +
#menu ul {
 +
position: static;
 +
visibility: visible;
 +
opacity: 1;
 +
margin: 0;
 +
background: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu ul ul {
 +
margin: 0 0 0 20px !important;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu li {
 +
position: static;
 +
display: block;
 +
float: none;
 +
border: 0;
 +
margin: 5px;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu ul li {
 +
margin-left: 20px;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
#menu a {
 +
display: block;
 +
float: none;
 +
padding: 0;
 +
color: #999;
 +
}
 +
#menu a:hover {
 +
color: #fafafa;
 +
}
 +
#menu ul a {
 +
padding: 0;
 +
width: auto;
 +
}
 +
#menu ul a:hover {
 +
background: none;
 +
}
 +
#menu ul li:first-child a:after, #menu ul ul li:first-child a:after {
 +
border: 0;
 +
}
 +
}
 +
@media screen and (min-width: 600px) {
 +
#menu {
 +
display: block !important;
 +
}
 +
}
 +
/* iPad */
 +
.no-transition {
 +
-webkit-transition: none;
 +
-moz-transition: none;
 +
-ms-transition: none;
 +
-o-transition: none;
 +
transition: none;
 +
opacity: 1;
 +
visibility: visible;
 +
display: none;
 +
}
 +
#menu li:hover > .no-transition {
 +
display: block;
 +
}
 +
</style>
<style type="text/css">
<style type="text/css">
.firstHeading {
.firstHeading {
Line 83: Line 382:
   </head>
   </head>
<body>
<body>
-
<div align="center">
+
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">多级CSS3动画下拉菜单</h1>
-
  <div class="header" style="width:75%" >
+
 
-
  <div class="header_top" >
+
<div id="menu-wrap">
-
        <div class="wrap" >
+
<ul id="menu">
-
<div class="logo">
+
<li><a href="http://www.dowebok.com/" target="_blannk">首 页</a></li>
-
<a href="https://2014.igem.org/Team:SJTU-Software"><h1><span class="black">EasyBBK</span> <span class="black"></span></h1></a>
+
<li> <a href="">分 类</a>
-
</div>
+
<ul>
-
<div class="menu">
+
<li> <a href="">页面重构</a>
-
    <ul>
+
<ul>
-
<li class="active"><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li>
+
<li><a href="">HTML</a></li>
-
<li><a href="about.html">Project</a></li>
+
<li><a href="">CSS</a></li>
-
<li ><a href="https://2014.igem.org/Team:SJTU-Software/Team">Team</a></li>
+
<li><a href="">Photoshop</a></li>
-
<li><a href="services.html">Document</a></li>
+
</ul>
-
<li><a href="contact.html">Requirement</a></li>
+
</li>
-
                                                     
+
<li> <a href="">编程语言</a>
-
<div class="clear"></div>
+
<ul>
-
</ul>
+
<li><a href="">JavaScript</a></li>
-
</div>
+
<li><a href="">PHP</a></li>
-
    <div class="clear"></div>
+
<li><a href="">Java</a></li>
-
        </div>
+
<li><a href="">Python</a></li>
-
    </div>
+
<li><a href="">NodeJS</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">调试工具</a>
 +
<ul>
 +
<li><a href="">Firebug</a></li>
 +
<li><a href="">Web Developer Toolbar</a></li>
 +
<li><a href="">IETester</a></li>
 +
<li><a href="">YSlow</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">浏览器</a>
 +
<ul>
 +
<li><a href="">IE</a></li>
 +
<li><a href="">Firefox</a></li>
 +
<li><a href="">Chrome</a></li>
 +
<li><a href="">Safari</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
<li> <a href="">链 接</a>
 +
<ul>
 +
<li> <a href="">门户</a>
 +
<ul>
 +
<li> <a href="">百度</a>
 +
<ul>
 +
<li><a href="">百度知道</a></li>
 +
<li><a href="">百度音乐</a></li>
 +
<li><a href="">百度百科</a></li>
 +
<li><a href="">百度贴吧</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">腾讯</a>
 +
<ul>
 +
<li><a href="">腾讯网</a></li>
 +
<li><a href="">QQ空间</a></li>
 +
<li><a href="">QQ音乐</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">新浪</a>
 +
<ul>
 +
<li><a href="">新浪首页</a></li>
 +
<li><a href="">新浪微博</a></li>
 +
<li><a href="">新浪博客</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">网易</a>
 +
<ul>
 +
<li><a href="">163首页</a></li>
 +
<li><a href="">163邮箱</a></li>
 +
<li><a href="">网易科技</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
<li> <a href="">新闻</a>
 +
<ul>
 +
<li><a href="">搜狐新闻</a></li>
 +
<li><a href="">腾讯新闻</a></li>
 +
<li><a href="">新浪新闻</a></li>
 +
<li><a href="">网易新闻</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">社交</a>
 +
<ul>
 +
<li> <a href="">社交1</a>
 +
<ul>
 +
<li><a href="">社交1-1</a></li>
 +
<li><a href="">社交1-2</a></li>
 +
<li><a href="">社交1-3</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">社交2</a>
 +
<ul>
 +
<li><a href="">社交2-1</a></li>
 +
<li><a href="">社交2-2</a></li>
 +
<li><a href="">社交2-3</a></li>
 +
</ul>
 +
</li>
 +
<li> <a href="">社交3</a>
 +
<ul>
 +
<li><a href="">社交3-1</a></li>
 +
<li><a href="">社交3-2</a></li>
 +
<li><a href="">社交3-3</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</li>
 +
<li><a href="">关 于</a></li>
 +
<li><a href="">联 系</a>
 +
<ul>
 +
<li><a href="">微博</a></li>
 +
<li><a href="">微信</a></li>
 +
<li><a href="">E-mail</a></li>
 +
</ul>
 +
</li>
 +
</ul>
</div>
</div>
                                              
                                              

Revision as of 17:50, 11 October 2014


多级CSS3动画下拉菜单

Search

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.Lorem ipsum dolor sit amet.

Present

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.Lorem ipsum dolor sit amet.

Upload

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.Lorem ipsum dolor sit amet.

Compare

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.Lorem ipsum dolor sit amet.

SJTU-Software


Shanghai Jiao Tong University


800, Dongchuan Road


200240 Shanghai, China


back to top

Retrieved from "http://2014.igem.org/Team:SJTU-Software2/test"