首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作HTML/CSS → 类似导向牌的悬停菜单CSS3 html5导航菜单示例源码

类似导向牌的悬停菜单CSS3 html5导航菜单示例源码

来源:维维整理 发布时间:2017-8-23 8:16:57 人气:

类似导向牌的悬停菜单CSS3 html5导航菜单示例源代码是小编为大家整理的一款由HTML5 css3 技术实现的导航菜单,看上去就像是路上的标示牌那样,也像是一些旅游景区的导向牌,具有立体感,当鼠标悬停于上面的时候,就会显示出二级子菜单,与主菜单形成互应效果,一样具有立体感,主菜单文字变色,所以这款菜单创意性还是非常不错的,维维小编觉得挺高大上,虽然只是纯文字的,有兴趣的朋友别错过了,一块来详细了解下吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D侧躺CSS3菜单-维维源码下载</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body {
  font: 14px/120% "Source Sans Pro", sans-serif;
  color: #999999;
  background: #111111;
  transition: all 0.2s;
}
h1, h2, h3 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
}
.logo {
  margin: 1em auto;
  text-align: center;
}
.logo h1 {
  font-size: 2em;
}
.menu_wrapper {
  padding: 1em;
  perspective: 500px;
}
nav {
  width: 230px;
  max-width: 360px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(20deg) rotateX(36deg) rotateZ(-6deg);
  transition: transform 1s;
}
nav > ul {
  list-style: none;
  padding: 1em;
  transform: translateZ(-100px);
  transform-style: preserve-3d;
  transition: all 0.2s;
}
nav > ul > li {
  margin: 0 0 0.5em 0;
  position: relative;
  color: #222222;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  transition: all 0.2s;
  transform-style: preserve-3d;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  background-color: #ffac05;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFAC05', endColorstr='#FFD96404');
  background-image: -moz-linear-gradient(top, #ffac05 0%, #d96404 100%);
  background-image: -webkit-linear-gradient(top, #ffac05 0%, #d96404 100%);
  background-image: linear-gradient(to bottom, #ffac05 0%, #d96404 100%);
}
nav > ul > li:hover {
  background: white;
  transform: translateZ(16px) rotateY(4deg);
}
nav > ul > li:hover a {
  color: #222222;
}
nav > ul > li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateZ(60px) rotateY(-25deg);
}
nav > ul > li:hover ul li {
  margin-left: 0.325em;
  transition: all 0.4s;
}
nav > ul > li a {
  display: block;
  padding: 0.5em;
  min-height: 2.5em;
  line-height: 2.5em;
  color: white;
  font-size: 1.5em;
  text-decoration: none;
  transition: all 0.2s;
}
nav > ul > li a:hover {
  color: #222222;
}
nav > ul > li ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 83%;
  top: 0;
  padding-left: 2em;
  min-width: 300px;
  transition: all 0.2s;
  transform: translateZ(-5px) rotateY(-10deg);
}
nav > ul > li ul li {
  display: inline-block;
  width: 45%;
  margin: 0 0 0.325em -3em;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
}
nav > ul > li ul li a {
  color: black;
  font-size: 1.325em;
  line-height: 120%;
  background: white;
  border-radius: 4px;
}
nav > ul > li ul li a:hover {
  background: #ff9922;
}
nav > ul > li ul div {
  font-family: "Source Sans Pro", sans-serif;
  color: #dddddd;
}
</style>
</head>
<body>
<div class="menu_wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="#"><h3>Service Page One</h3></a>
            <div>Some additional content</div>
          </li>
          <li><a href="#"><h3>Service Page Two</h3></a>
            <div>Some additional content</div>
          </li>
          <li><a href="#"><h3>Service Page Three</h3></a>
            <div>Some additional content</div>
          </li>
        </ul>
      </li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#"><h3>About Page One</h3></a>
            <div>Some additional content</div>
          </li>
          <li><a href="#"><h3>About Page Two</h3></a>
            <div>Some additional content</div>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>
</body>
</html>

相关下载
栏目导航
本类热门阅览