前端开发者学堂 - fedev.cn

css3制作大型导航

#Menu/Navigation
发布于 白牙

白牙同学好久都没有做练习了，今天为大家带来一个CSS3制作的简单大型导航，运用到的CSS3属性包括圆角border-radius、渐变、盒子和文字阴影等等。通过前面的案例，相信大家已经对这些CSS3常用属性已经有一定了解了。本来这个案例原意是想向大家展示CSS3的mutil column属性族的运用，但因为当前除了chrome以外的各个浏览器对它的支持并不是很好，所以也没有什么新颖的地方，有兴趣或者像学习导航制作的就往下看吧~不足之处和建议也希望大家能在下方提出~！

demo download

HTML结构

结构主要分为上方商标部分和下方菜单按钮部分

<div class="main-menu">
  <div class="brand">
    <a href="#" class="logo">YOUR LOGO</a>
    <div class="btn-group">
      <button type="button" class="sign-in">Sign in</button><button type="button" class="register">Register</button>
    </div>
    <div class="search-field">
      <input type="search" placeholder="Search" />
      <a class="search-icon">s</a>
    </div>
  </div>
  <ul class="nav clearfix">
    <li><a href="#">NFL</a></li>
    <li><a href="#">MBL</a></li>
    ......
    <li>
      <a href="#">MORE</a>
      <ul class="more-sport">
        <span class="header">Sports</span>
        <li>
          <a href="#">Aussie Football</a>
          <a href="#">MSL</a>
          <a href="#">CFL</a>
          <a href="#">NCAA Baseball</a>
          <a href="#">Cricket</a>
          <a href="#">Olympics</a>
        </li>
        <li>
          ......
        </li>
        <li>
          ......
        </li>
        <span class="footer"> Last update: Today,28 September,12 minutes ago <a href="#">ALL SPORTS</a> </span>
      </ul>
    </li>
  </ul>
</div>

CSS代码

常用到的样式代码就不另外单独介绍了，具体的可以参考样式代码中的注解：

.main-menu {
    margin:50px auto;
    width:910px;
}

/*顶部商标部分*/
.brand {
    text-align:center;
    width:908px;
    height:48px;
    line-height: 48px;
    border:1px solid rgb(25,25,25);
    border-radius:4px 4px 0 0;
    position:relative;
    background:-webkit-linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    background:-moz-linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    background:linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    box-shadow:inset 0 1px 0 rgb(62,63,65),inset 1px 0 0 rgba(75,75,80,0.4);
}
.brand .btn-group {position:absolute;top:0;left:8px;}
.brand .search-field {position:absolute;top:0;right:20px;}

/*brand区域登陆和注册按钮制作*/
.brand button {
    height:27px;
    padding:0 15px;
    line-height:25px;
    border:1px solid rgb(15,15,15);
    background:-webkit-linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    background:-moz-linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    background:linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    color:rgb(200,200,200);
    box-shadow:inset 0 1px 0 rgb(77,77,78),0 1px 0 rgb(42,43,44);
    font-weight:500;
    text-shadow:1px 1px 0 rgb(15,15,16);
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.brand .sign-in {border-radius:14px 0 0 14px; border-right:0 none;}
.brand .register {border-radius:0 14px 14px 0;}

/*brand区域logo*/
.brand .logo {
    color:rgb(255,255,255);
    font-size:25px;
    font-weight:bolder;
    text-shadow:0 -1px 0 rgb(111,111,111), 0 -2px 0 rgb(32,33,34);
}

/*brand区域搜索栏制作*/
.brand input {
    width:140px;
    height:26px;
    border:none;
    padding:0 0 0 30px;
    border-radius:13px;
    color:rgb(255,255,255);
    background-color:rgb(0,0,0);
    box-shadow:0 1px 0 rgb(43,44,45);
}
.brand .search-icon {
    position:absolute;
    display:block;
    left:10px;
    top:0;
    font-family:icon-search;
    font-size:13px;
    color:rgb(100,100,100);
    cursor:pointer;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
/*按钮的悬浮和激活效果*/
.brand button:hover {color:rgb(255,255,255);}
.brand button:active {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68));}
.brand .search-icon:hover {color:rgb(255,255,255);}

/*导航条部分*/
.nav {background-color:rgb(175,175,175);border-radius:0 0 4px 4px;}
.nav > li {float:left;}

/*导航条按钮制作*/
.nav > li > a {
    display:block;
    color:rgb(50,50,50);
    height:38px;
    font-size:13px;
    font-weight:bold;
    line-height:38px;
    padding:0 20px;
    border:1px solid;
    margin-right:1px;
    border-color:rgb(254,254,254) rgb(227,227,227) rgb(210,210,210);
    background:-webkit-linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    background:-moz-linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    background:linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    text-shadow: 0 1px 0 rgb(229,229,229);
}
.nav > li:first-child a {border-radius:0 0 0 4px;}
.nav > li:last-child {position:relative;}
.nav > li:last-child > a {
    border-radius:0 0 4px 0;
    padding:0 32px 0 22px;
    margin:0;
}

/*下拉按钮的三角标制作*/
.nav > li:last-child > a:before {
    content:"";
    position:absolute;
    right:15px;
    top:18px;
    border:5px solid transparent;
    border-color:rgb(50,50,50) transparent transparent transparent;
}
/*导航条按钮悬浮和激活效果*/
.nav > li:hover > a {
    border-color:rgb(255,255,255) rgb(240,240,240) rgb(221,221,221);
    background:-*-linear-gradient(top,rgb(255,255,255),rgb(203,203,203));
}
.nav > li:not(:last-child) > a:active {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
.nav > li:hover ul {display:block;}

/*下拉菜单制作*/
.more-sport {
    position:absolute;
    width:478px;
    top:100%;
    right:0;
    margin-top:13px;
    padding:46px 0 61px 0;
    border:1px solid;
    border-color:rgb(250,250,250) rgb(226,226,226) rgb(234,234,234);
    border-radius:4px;
    background:-webkit-linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    background:-moz-linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    background:linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    color:rgb(0,0,0);
    display:none;
}

/*填补dropdown和nav之间的留白，避免鼠标进入该留白区域时失去悬浮状态导致dropdown的消失*/
.more-sport:before {         
    content:"";
    position:absolute;
    width:100%;
    height:14px;
    bottom:100%;
    left:0;
}

/*制作dropdown三角标*/
.more-sport:after {
    content:"";
    position:absolute;
    bottom:100%;
    right:40px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:transparent transparent rgb(227,227,227) transparent;
}

/*利用display:inline-block实现多栏布局*/
.more-sport li {
    display:inline-block;
    width:153px;
    vertical-align: top;
}

/*每一列中的元素标签样式*/
.more-sport li a {
    display:block;
    margin-left:13px;
    color:rgb(0,0,0);
    font-size:13px;
    font-weight:bold;
    padding:2px 5px;
    text-shadow: 0 1px 0 rgb(240,240,240);
    border-radius:7px;
}

/*页首*/
.more-sport .header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    margin-left:18px;
    line-height:48px;
    color:rgb(33,33,33);
    text-shadow: 0 1px 0 rgb(246,246,246);
}

/*页脚*/
.more-sport .footer {
    display:block;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    color:rgb(145,145,145);
    text-shadow:0 1px 0 rgb(242,242,242);
    line-height:49px;
    background-color:rgb(228,228,228);
    border-radius:0 0 3px 3px;
    text-indent:20px;
}

/*页脚按钮*/
.more-sport .footer a {
    position:absolute;
    right:10px;
    top:50%;
    margin-top:-15px;
    color:rgb(50,50,50);
    text-shadow:0 1px 0 rgb(247,247,247);
    height:28px;
    line-height:28px;
    padding:0 12px;
    text-indent:0;
    border:1px solid rgb(200,200,200);
    border-radius:4px;
    background:-webkit-linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    background:-moz-linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    background:linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    box-shadow:inset 0 1px 0 rgb(255,255,255),0 1px 3px rgb(210,210,210);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

/*元素悬浮效果*/
.more-sport li a:hover {
    color:rgb(0,31,99);
    background:rgb(150,150,150);
}

/*按钮悬浮和激活效果*/
.more-sport .footer a:hover {color:rgb(0,31,99);}
.more-sport .footer a:active {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}

/*图标*/
@font-face {
  font-family: 'icon-search';
  src: url("font/icon-search.eot");
  src: url("font/icon-search.eot?#iefix") format('embedded-opentype'),
       url("font/icon-search.woff") format('woff'),
       url("font/icon-search.ttf") format('truetype'),
       url("font/icon-search.svg#icon-search") format('svg');
  font-weight: normal;
  font-style: normal;
}

demo download

如需转载，烦请注明出处：https://www.fedev.cn/demo/709.html

Nike Unveil a Dip Dye-Inspired Air VaporMax Plus