创建个性菜单过滤用户菜单_创建快速，便利菜单

最新推荐文章于 2024-09-09 17:22:32 发布

翻译最新推荐文章于 2024-09-09 17:22:32 发布 · 309 阅读

文章标签：

#css #html #js #jquery #java #ViewUI

本文介绍了一个使用CSS和jQuery实现的粘性菜单教程，包括页面设置、元素填充、样式设计及菜单切换功能，适用于快速创建个性化的用户菜单。

创建个性菜单过滤用户菜单

在本快速教程中，我们将使用CSS实现粘性菜单，并使用jQuery切换其可见性。这是为访问者提供社交链接，网站网络中其他位置甚至个性化设置的理想方法。

第1步：设置页面

让我们开始制作一个基本HTML页面。我们将CSS加载到<head> ，然后将jQuery（位于文档底部）加载到切换动画中。

<!DOCTYPE html>
<html>
<head>
	<title>Sticky Menu</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>

<body>


	<!--js-->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</body>
</html>

步骤2：填满页面

现在让我们创建一些结构元素。

<div class="toolbar-wrapp">

	<div class="sticky-toolbar">
		<ul>
			<li class="glyph" id="support">
				<a href="#" data-icon="&#128227;"></a>
			</li>

			<li class="glyph" id="help">
				<a href="#" data-icon="&#59272;"></a>
			</li>

			<li class="glyph" id="settings">
				<a href="#" data-icon="&#9881;"></a>
			</li>
		</ul>
	</div><!--/ sticky-toolbar-->

	<div class="popup">
		<div class="arrow"></div>
			<ul>
				<li><a href="">List Item 1</a></li>
				<li><a href="">List Item 2</a></li>
				<li><a href="">List Item 3</a></li>
			</ul>
	</div><!--/ popup-->

</div><!--/ toolbar-wrapp-->

我们将使用data-icons属性指定字体图标。字体图标将用于有效地装饰我们的主菜单项。字体字形可以缩放和着色而不会降低分辨率，而使用位图图像则灵活性较低。随着我们的前进，我们将更多地谈论这一点。

步骤3：添加填充内容

为了突出显示正在发生的事情，让我们添加一些虚拟文本和徽标。如果要查看最终结果的全部内容，请确保有足够的内容供您滚动。

<div class="wrapp">

	<img src="img/logo.jpg" class="logo">

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
	
	<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
	
	</div><!--/ wrapp-->

步骤4：一般样式

首先，我们将加载Eric Meyer的Reset CSS ，将其放置在css文件的顶部，在其他选择器上方：

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 500;
    font-size: 1.1em;
    color: #34495E;
    background-color: #ECF0F1;
}

div.wrapp{
	width: 70%;
	margin: 0 auto;
}

p {
	margin-bottom: 4em;
}

.logo{
	max-width: 100%;
}

您会注意到，我已将div.wrapp 70％，此外，我还说图像的最大宽度应为100％。这是构建流畅布局的坚实起点。

步骤5：样式化工具栏

接下来，我们将添加一些工具栏样式-首先通过将包装器固定到页面的一侧，有效地将其从文档流中删除。

div.toolbar-wrapp{
		position: fixed;
		display: block;
		top: 30%;
	}

	div.sticky-toolbar{
		position: relative;
		top: 30%;
		padding: .1em;
		background-color: #2C3E50;
		float: left;
		-webkit-border-radius: 0 .2em .2em 0;
		-moz-border-radius: 0 .2em .2em 0;
		border-radius: 0 .2em .2em 0;
	}

注意：声明position: relative非常重要position: relative div.sticky-toolbar position: relative ，因为它可以使我们将其他元素正确地相对于它定位。

步骤6： `@font-face`载入

如前所述，我们不会在图标上使用位图图像。相反，我们将使用@ font-face提取字体文件以在浏览器中使用。

@ font-face是一个CSS规则，如果用户未安装该字体，则该规则允许您从服务器下载特定字体以呈现网页。这意味着Web设计人员将不再需要遵循用户已预先安装在计算机上的一组特定的“ Web安全”字体。

-font-face.com

我们将使用Entypo ; 一个开源的免费图标包，用于商业和个人用途。它具有PSD，EPS，PDF，OpenType，TrueType和其他各种文件，因此让我们下载它们以在我们的项目中使用。

这是我们的@ font-face声明，我们将其粘贴到CSS文件中。确保路径正确指向项目中的字体文件，否则它们将不会显示。

@font-face {
	    font-family: 'Entypo';
	    src: url('../font/entypo.eot');
	    src: local('☺'), 
	    url('../font/entypo.woff') format('woff'), 
	    url('../font/entypo.ttf') format('truetype'),
	    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
	}

现在，我们使用data-icons属性选择标记中的所有元素，在每个伪元素上添加一个:before伪元素，并使用data-icons值中包含的任何字符填充该伪元素。

[data-icon]:before {
		font-family: 'Entypo';
		content: attr(data-icon);
	}

例如，这是我们的第一个锚点：

<a href="#" data-icon="&#128227;"></a>

并且我们CSS将使用值📣 填充其:before元素。

步骤7：样式化工具栏元素

让我们为图标添加一些很酷的效果。

div.sticky-toolbar ul li a{
	display: block;
	width: .8em;
	margin: 0.2em;
	line-height: 80%;
	font-size: 2.2em;
	text-align: center;
	color: #fff;
	background-color: #16A085;
	-webkit-border-radius: .1em;
	-moz-border-radius: .1em;
	border-radius: .1em;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	-webkit-font-smoothing: antialiased;
	}

注意：要最大程度地使Webfont图标清晰（至少在Webkit浏览器中），请使用-webkit-font-smoothing: antialiased; 到本节。您还可以使用全局选择器将其应用于所有内容 ： * { -webkit-font-smoothing: antialiased; } * { -webkit-font-smoothing: antialiased; }

现在添加一些悬停效果，您就完成了。

div.sticky-toolbar ul li a:hover{
	background-color: #1ABC9C;
	}

步骤8：样式化弹出菜单

我们的菜单栏已经解决了，现在让我们为弹出菜单添加一些样式：

div.popup{
	display: none;
	float: right;
	position: relative;
	left: 5%;
	background-color: #2C3E50;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

注意：在默认状态下，我们必须使用display: none;隐藏该部分display: none; 。稍后，我们将使用jQuery切换可见性。您可以暂时将显示值留空，直到完成样式设置，但不要忘记稍后再将其恢复。

步骤9：设置弹出菜单元素的样式

向前！让我们为菜单元素添加一些样式：

div.popup ul li a{
	position: relative;
	display: inline-block;
	font-size: .85em;
	color: #fff;
	padding: 0 2em 0 2em;
	margin: .4em;
	text-align: center;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	}

和一个简单的:hover效果：

div.popup ul li a:hover{
	background-color: #1ABC9C;
	}

步骤10：使用CSS创建箭头

与其创建透明的.png箭头图像，我们将使用一个不错的技巧来使用CSS边框创建相同的效果（尽管完全可缩放）。如果您不想使标记与其他元素混为一谈，也可以为此使用伪元素：

.arrow {
	position: absolute;
	top: 10%;
	left: -.4em;
	width: 0; height: 0;
	border-top: .5em solid transparent;
	border-right: .5em solid #2C3E50;
	border-bottom: .5em solid transparent;  
	}

有关如何实现此功能的更多详细信息，请参阅Joren Van Hee撰写的CSS Triangles快速提示。

步骤11：创建切换功能

对于最后一步，我们将使用jQuery代码段，以允许我们切换弹出菜单。将以下<script>部分添加到我们的文档底部，即对jQuery本身的调用下面。

在$(document).ready函数中（以确保已加载所有页面内容并准备就绪），我们在.popup #support's click事件.popup jQuery的fadeToggle（）方法应用于.popup ：

<script type="text/javascript">

	$(document).ready(
		function(){
        $("#support").click(function () {
        	$(".popup").fadeToggle(150);
        	return false;
        });
    });

</script>

注意：请确保已包含return false语句，这将防止您每次单击图标都返回页面顶部。

结论

一种轻松快捷的方法，可在您的下一个项目中创建有趣的功能。您可以按自己喜欢的任何方式对其进行更改，我期待听到您在评论中如何使用它！

翻译自: https://webdesign.tutsplus.com/articles/create-a-quick-sticky-menu--webdesign-12120