CSS3自定义图标悬浮菜单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3自定义图标悬浮菜单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5/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;
}
/* HTML5 display-role reset for older browsers */
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;
}
</style>

    <style>
body {
  background-color: #0a68bb;
  background-image: url('css/5335bg.jpg');
  background-size : cover;
}

nav {
  margin : 50px auto;
  width  : 290px;
}

menu {
  border-radius : 3px;
}

menu:after , menu:before {
  display : block;
  content : ' ';
}

menu:after {
  clear : both;
}

li {
  list-style-type : none;
  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);

  float   : left;
  cursor  : pointer;
  padding : 3px 10px;
  border-top    : 2px solid rgba(200,200,255,0.5);
  border-bottom : 2px solid rgba(50,50,50,0.4);
}

li:first-child {
  border-radius : 5px 0 0 5px;
}

li:last-child {
  border-radius : 0 5px 5px 0;
}

a {
  display : block;
  padding : 10px 13px;
  font-size : 26px;
  text-decoration : none;
  border-radius   : 5px;
  position        : relative;
  top   : 0;
  color : #FFF;			
  transition : all .4s;
}

li:hover a {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}

li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

/*************************************/

.menu2 {
  width : 350px;
}

.menu2 a {
  font-family : georgia;
  font-size   : 14px;
  font-style  : italic;
  text-transform : capitalize;
}

.menu2 li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2); 
}

.selected {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

a.fun {
  display : none;
}

</style>


</head>

<body>

  <nav>
  <menu>
    <li><a href="#">☀</a></li>
    <li><a href="#">✈</a></li>
    <li><a href="#">❄</a></li>
    <li><a href="#">☎</a></li>
  </menu>
</nav>
<nav class="menu2">
  <menu>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#" class="selected">contact</a></li>
    <li><a href="#">blog</a></li>
  </menu>
</nav>
</body>
</html>

CSS代码(style.css):

body{background-color:#0a68bb;background-image:url('http://mojoimage.com/free-image-hosting-12/5335bg.jpg');background-size:cover;}
nav{margin:50px auto;width:290px;}
menu{border-radius:3px;}
menu:after,menu:before{display:block;content:' ';}
menu:after{clear:both;}
li{list-style-type:none;background:linear-gradient(rgba(220,220,255,0.4) 85%,rgba(255,255,255,0.5) 100%);float:left;cursor:pointer;padding:3px 10px;border-top:2px solid rgba(200,200,255,0.5);border-bottom:2px solid rgba(50,50,50,0.4);}
li:first-child{border-radius:5px 0 0 5px;}
li:last-child{border-radius:0 5px 5px 0;}
a{display:block;padding:10px 13px;font-size:26px;text-decoration:none;border-radius:5px;position:relative;top:0;color:#FFF;transition:all .4s;}
li:hover a{top:-20px;color:#4eacff;background-color:#fff;box-shadow:0 0 5px 0 rgba(255,255,255,0.7);transition:all .4s;}
li a:after{display:block;content:'';position:absolute;top:100%;left:42%;border-style:solid;border-color:transparent;border-width:5px 5px 0 5px;transition:all .4s;}
li:hover a:after{border-color:white transparent transparent transparent;transition:all .4s;}
/*************************************/
.menu2{width:350px;}
.menu2 a{font-family:georgia;font-size:14px;font-style:italic;text-transform:capitalize;}
.menu2 li{border-right:1px solid rgba(200,200,255,0.5);border-left:1px solid rgba(40,40,40,0.2);}
.selected{top:-20px;color:#4eacff;background-color:#fff;box-shadow:0 0 5px 0 rgba(255,255,255,0.7);transition:all .4s;}
.selected:after{border-color:white transparent transparent transparent;transition:all .4s;}
a.fun{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)