如何使用CSS3+JQuery实现悬浮墙式菜单

首先，让我们来了解什么是悬浮墙式菜单。悬浮墙式菜单一般出现在页面一侧或角落的固定位置，当页面滚动时，菜单会跟随滚动而移动，保持在视野范围内，以方便用户随时能够使用。

为了实现这个效果，我们可以使用CSS3中的position属性和Jquery中的scroll()方法。下面是具体的实现步骤：

CSS部分：

首先，在HTML页面中，创建一个DIV元素，这个DIV元素就是悬浮的菜单。然后，为这个DIV元素添加样式，使其具有固定的位置，并且宽高、背景等样式可以自行设置。CSS代码如下所示：

#menu {
    position: fixed;
    top: 50px;  // 距离顶部50px
    left: 0;
    width: 200px;
    height: 300px;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 999;  // 显示优先级最高
}

JQuery部分：

在页面加载时，通过JQuery获取到menu元素，并获取到页面中与menu元素距离顶部的距离（offset.top）。然后，在滚动页面时，判断滚动距离和menu元素到顶部的距离的大小关系，动态设置menu元素的top值，使其保持固定位置。代码如下所示：

$(document).ready(function() {
    var menuOffset = $("#menu").offset().top;  // 距离顶部的距离
    $(window).scroll(function() {
        if ($(this).scrollTop() > menuOffset ) {
            $("#menu").css("top",$(this).scrollTop()-menuOffset);  // 设置top值，使其保持固定位置
        } else {
            $("#menu").css("top","0");  // 还原top值
        }   
    });
});

至此，一个简单的悬浮墙式菜单就完成了。下面，我们来看一下具体的应用案例。

示例一：带有浮动效果的悬浮菜单

这个实例是在之前的基础上进行了扩展，让菜单呈现出类似海浪浮动的效果。我们可以使用JQuery的animate()方法，让菜单在上下滑动时，带有缓动效果，使其看起来更加生动。

HTML代码：

<div id="menu">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
    </ul>
</div>
<div id="section1">
    <h2>Section 1</h2>
    <p>Content Section 1</p>
</div>
<div id="section2">
    <h2>Section 2</h2>
    <p>Content Section 2</p>
</div>
<div id="section3">
    <h2>Section 3</h2>
    <p>Content Section 3</p>
</div>
<div id="section4">
    <h2>Section 4</h2>
    <p>Content Section 4</p>
</div>
<div id="section5">
    <h2>Section 5</h2>
    <p>Content Section 5</p>
</div>

CSS代码：

#menu {
    position: fixed;
    top: 50px;
    left: 0;
    width: 200px;
    height: 300px;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    overflow: hidden;  // 隐藏菜单内容的滚动条
}

#menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

#menu li a {
    text-decoration: none;
}

#section1,#section2,#section3,#section4,#section5 {
    margin-top: 400px;
    height: 500px;
}

#section1 { background: #FDEDEC; }
#section2 { background: #EAF2F8; }
#section3 { background: #FEF9E7; }
#section4 { background: #E8F8F5; }
#section5 { background: #FAE5D3; }

JQuery代码：

$(document).ready(function() {
    var menuOffset = $("#menu").offset().top;
    $(window).scroll(function() {
        if ($(this).scrollTop() > menuOffset ) {
            $("#menu").animate({top:$(this).scrollTop()-menuOffset}, 200, 'swing');  // 使用animate()方法，添加缓动效果
        } else {
            $("#menu").animate({top:0}, 200, 'swing');
        }   
    });
});

示例二：带有搜索框的悬浮菜单

这个实例在之前的基础上加入了搜索框，让菜单功能更加完善。我们可以先将悬浮菜单绝对定位，然后在菜单中添加搜索框元素，并使用CSS设置其样式。在滚动页面时，可以动态改变菜单的top和left值，使搜索框变成固定位置。代码如下所示：

HTML代码：

<div id="menu">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
    </ul>
    <div id="search-box">
        <input type="text" placeholder="Search...">
        <button type="submit">Search</button>
    </div>
</div>
<div id="section1">
    <h2>Section 1</h2>
    <p>Content Section 1</p>
</div>
<div id="section2">
    <h2>Section 2</h2>
    <p>Content Section 2</p>
</div>
<div id="section3">
    <h2>Section 3</h2>
    <p>Content Section 3</p>
</div>
<div id="section4">
    <h2>Section 4</h2>
    <p>Content Section 4</p>
</div>
<div id="section5">
    <h2>Section 5</h2>
    <p>Content Section 5</p>
</div>

CSS代码：

#menu {
    position: absolute;  // 使用绝对定位
    top: 100px;
    left: 0;
    width: 200px;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    overflow: hidden;
}

#menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

#menu li a {
    text-decoration: none;
}

#search-box {
    padding: 10px;
}

#search-box input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

#search-box button {
    margin-top: 10px;
    width: 100%;
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

#section1,#section2,#section3,#section4,#section5 {
    margin-top: 400px;
    height: 500px;
}

#section1 { background: #FDEDEC; }
#section2 { background: #EAF2F8; }
#section3 { background: #FEF9E7; }
#section4 { background: #E8F8F5; }
#section5 { background: #FAE5D3; }

JQuery代码：

$(document).ready(function() {
    var menuOffset = $("#menu").offset().top;
    var searchBoxOffset = $("#search-box").offset().top - menuOffset;  // 计算距离顶部的距离
    $(window).scroll(function() {
        if ($(this).scrollTop() > menuOffset ) {
            $("#menu").css({"top":$(this).scrollTop()-menuOffset, "left":$(this).scrollLeft()+10});  // 修改top和left值
            $("#search-box").css({"position":"fixed", "top":searchBoxOffset, "left":"10px"});  // 修改搜索框的top和left值
        } else {
            $("#menu").css({"top":"0px", "left":"0px"});
            $("#search-box").css({"position":"static"});
        }   
    });
});

通过以上两个示例，我们可以看到如何使用CSS3+JQuery来实现悬浮墙式菜单，并进行一些扩展，让菜单更加丰富和实用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用CSS3+JQuery实现悬浮墙式菜单 - Python技术站

如何使用CSS3+JQuery实现悬浮墙式菜单

相关文章