首页 > HTML5/CSS3

html5+css3实现简单手机页面菜单导航

发表于2015-04-24 17:05:32| --次阅读| 来源webkfa| 作者小猪仔

摘要:html5+css3实现简单手机页面菜单导航,支持二级导航

说明:下面代码运行要在支持html5+css3的浏览器运行代码

html5代码
运行代码
<!-- webkfa.com -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-touch-fullscreen" content="YES" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="format-detection" content="telephone=no" />
  <title>css3简单手机页面菜单 - 学到老web开发</title>
    <link rel="stylesheet" href="http://statics.webkfa.com/css/lz/style.css" media="screen" type="text/css" />
</head>
<body>
  <div class="container">
  <ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="http://statics.webkfa.com/js/lz/index.js"></script>

</body>
</html>

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1