导航菜单浮在地图上方

最新推荐文章于 2022-11-04 15:33:07 发布

原创最新推荐文章于 2022-11-04 15:33:07 发布 · 878 阅读

3 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

66 篇文章

订阅专栏

需要实现的效果：

Html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.51texiao.cn/" />
    <title></title>
    <style type="text/css">
        body, html,#allmap {
        width: 100%;height: 100%;overflow: hidden;margin:0;
        }

        *
        {
            margin: 0px;
            padding: 0px;
            font-size: 14px;
        }
        ul
        {
            list-style: none;
        }
        .main
        {
              margin: auto;
              margin-top: 40px;
              position: relative;
              width: 100px;
              min-width: 50px;
              height: 200px;
        	}
        .main .nav
        {
            width: 100px;
            margin: 0px auto;
            margin-top: 10px;
            
        }
        .main .nav a
        {
            width: 100px;
            height: 50px;
            line-height: 3.5;
            text-align: center;
            text-decoration: none;
            background-color: red;
            display: block;
            color:Black;
            font-weight:bold;
        }
        
        .navcontent
        {
        	  padding-left: 0;
              padding-top: 0;
              margin-top: 0;
              list-style: none;
              overflow: hidden;
              text-align: right;
              margin-bottom: 1px;
              text-align: center;
              transition: all .4s ease-out;
              height: 100%;
        }
        
        .navcontent li{
            border-radius: 2px;
            position: relative;
            display: inline-block;
            margin-left: 35px;
            line-height: 3.5;
            height:50px;
            width: 100%;
            margin: 0;
            margin-bottom: 10px;
            transition: background 3s;
            box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35);
            background-color: rgba(0,0,0,0);
            color:Black;
            font-weight:bold;
        }
        .main .nav .navcontent
        {
            display: none;
        }
        
        //悬浮div样式
        #up-map-div{
            top:30px;
            left:100px;
            position:absolute;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div id="allmap"></div>
    <div id="up-map-div">//悬浮div
        <ul class="main">
            <li class="nav"><a href="#">千年古城</a>
                <ul class="navcontent">
                    <li style="margin-top:10px">千年古城01</li>
                    <li>千年古城02</li>
                    <li>千年古城03</li>
                </ul>
            </li>
            <li class="nav"><a href="#">特色小城</a>
                <ul class="navcontent">
                    <li style="margin-top:10px">特色小城01</li>
                    <li>特色小城02</li>
                    <li>特色小城03</li>
                </ul>
            </li>
            <li class="nav"><a href="#">交流专区</a>
                <ul class="navcontent">
                    <li style="margin-top:10px">交流专区01</li>
                    <li>交流专区02</li>
                    <li>交流专区03</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

JavaScript代码：

//下面代码是点击一级菜单后，二级菜单隐藏和出现
<script type="text/javascript">
        $(document).ready(function () {
            var navs = $(".nav");
            var navcontents = $(".navcontent");
            var navlen = navs.length;

            $(".nav a").click(function () {
                if ($(this).siblings().css("display") == "none") {
                    $(this).siblings().css("display", "block")
                }
                else {
                    $(this).siblings().css("display", "none")
                }
            })
        }) 
  </script>

//下面代码是创建地图，百度密钥自行获取
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别  
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
 </script>