如何创建调整大小化菜单栏

安东尼奥普拉斯 经过 安东尼奥普拉斯  |  2013年3月12日

最近一些网站,喜欢 这是旅所有你,开始具有动态和动画菜单,该菜单在滚动下调整大小。最小化主导航以允许更多的内容空间。在本教程中,我将解释如何使用HTML5,CSS3和一点jQuery创建此菜单。 

如果您想在整个网站上特别关注您的内容,这种菜单很棒,它也使您可以在用户上创建更大更有影响的导航’首先访问网站。您可以更好地展示您的网站品牌或徽标,非常适合上述折叠视图;在访问中参加访问后,较小和最小化的版本巧妙地隐藏,让用户主要关注您的内容。

有几种方法可以这样做。在本教程中,我将解释如何创建一个完整的宽度固定菜单栏,它与徽标一起调整大小,并创建一个简单的最小化版本。如果您愿意通过徽标的另一个变体替换徽标映像,例如姓名缩写或图标,但请记住,一致性在此处非常重要,以便用户了解元素如何改变,其主要目的仍然是原来的;导航网站。

在我们开始之前,你可以 结账演示 或者 从这里下载来源.

 

在HTML中创建基本结构 

我们将首先创建我们需要的基本HTML代码。我们将坚持出发点的一个非常简单的HTML5结构。  

<!DOCTYPE HTML><html>
  <head>
  <meta http-equiv="内容-Type" content="text/html; charset=UTF-8" /> <title>How to create a dynamic top bar | Webdesigner Depot</title>
  </head><body>
</body></html> 

既然我们的初始HTML代码已完成,我们将添加菜单的代码以及我们的HTML文件头上的其他一些详细信息。 

<!DOCTYPE HTML> <html>
  <head>
    <meta http-equiv="内容-Type" content="text/html; charset=UTF-8" /> <meta name="author" content="安东尼奥普拉斯">
    <title>How to create a resizing menu bar | Webdesigner Depot</title>
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head><body>
    <header class=“large”>
    <nav><img class=“logo” src="wdd.png"/>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Posts</a></li>
      <li><a href="#">Awesome Freebies</a></li>
    </ul> </nav>
    </header>
    <section>
      <p>Let's get that menu small!</p>
      <p>End of the line.</p>
    </section>
  </body>
</html> 

在我们的<head>:我们为作者添加了元标记来标识文件创建者;之后我们包括Eric Meyer’SAGED RESET.CSS将几乎重置HTML文件中的每个元素,为您提供清洁和更轻松的文档。并且由于我们稍后将使用jQuery,因此在我们的头元素的最后一行中,我们通过jQuery CDN导入它。 

我批发了大多数文件,以保持文件尽可能简单,但请记住,如果您愿意下载所有这些文件的最新版本并沿HTML文件本地使用它们,这将防止版本兼容性可能存在问题或将来的这些文件的更改。 

在我们的<body>标签,我们使用了默认的HTML5<header> element. Our <header>将是全宽,并将负责菜单的大型和小版本之间的更改。我们正在给我们<header>一个名为“大”的类,以便我们可以在CSS中更改一些特定属性,以将菜单转换为较小的版本。这<nav>是我们的菜单集装箱,可容纳我们的网站徽标图像和一个简单的无序列表菜单,其中包含三个链接。 

由于我们在这里没有任何内容,因此<章节=“弹力”>将用于延长页面以强制滚动,以便我们可以看到菜单更改。

这是关于HTML上的。从现在开始,我们只需用CSS就可以使用CSS进行样式并使菜单动态。

 

打造菜单和页面 

要将此代码保留在单个文件中,我将在其中创建CSS<head>元素。所以我们的整个CSS将在我们的结束前来</head> tag. 

<style type="text/css">
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
/* Basic layout */
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;} 

这一点CSS将使我们的菜单960px宽和居中,同时将菜单安排到右侧和我们的徽标。我们还从Google Web字体导入Amaranth字体,以用于页面上的文本。 

section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; } 

在这里,我们只是强迫页面伸展以强制滚动,并定位文本以指示内容的开头和结束。该位是完全可选的,但它将帮助您计算如何使用内容对齐菜单的第二个版本。

标题{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }

/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }

</style>
</head>

在这里,我们正在完成我们的基本标题样式。这<header>将作为我们的菜单容器。它将包含我们的<nav>元素将是我们定义背景颜色的元素,菜单高度,菜单链接样式等。它将适应屏幕的宽度,属性宽度:100%,并将保持在网站上的其他元素上。要记住设置Z-index是很重要的,以确保此元素将重叠页面的其余部分以及位置:修复以使DIV固定在顶部,以便在用户时保持在同一位置滚动网站。如您所见,除了设置标题的样式外,我们还为此设置了一些特定的样式“large”类使用标题.large。我们的菜单’S初始状态将很大,所以我们在这里定义了所需的样式,只要用户进入页面就会看起来像我们想要的样式。

 

动态调整菜单的大小大小

我们完成了我们的菜单并设计了,但我们仍然希望使其最小化。要创建此其他状态,我们将为此创建新课程<header> in the CSS named “小,这将是更改我们需要修改的属性的负责。我们已经定义了更大的菜单,所以现在我们只需要让我们的菜单更短,我们的图像较小,比例地小,我们正在使用的边缘<li>必须减少元素,因此它们将垂直居中与新菜单高度:

/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }

所以你可以看出,这些样式几乎是与较大菜单相同的,我们刚刚改变了这个类“large” to “small”并改变了我们使用的值。我们在图像上使用负边缘 - 顶部将其驻留在容器中,因为图像具有微妙的阴影并且高于排版以适应它。现在我们拥有所有必要的样式来进行菜单更改大小,如果您尝试更改HTML<header class=“large”> to <header class=“small”>,您将在浏览器中看到菜单将变小。但是我们需要动态完成这一点。

使用jQuery更改菜单类

随着我们所有的样式,我们只需要添加一些JavaScript来使课程“大”和“小”之间的开关。由于我们要根据用户的滚动来更改此,我们将使用jQuery中的.scrolltop()函数。此功能让我们在像素中获取或设置滚动的位置。滚动位置是已经从浏览器视图中滚出的像素数。在这种情况下,我们只需要知道用户滚动的MANU像素是如何触发我们的代码并切换类:

<script type="text/javascript">
$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("标题").removeClass("大").addClass("小的");
    } else{
        $("标题").removeClass("小的").addClass("大");
    }
});
</script>

这是检测用户滚动何时滚动的JavaScript。当用户滚动超过100像素时,它将删除该类“large”我们创建并添加了我们的新课程,“small”。这样,菜单将更改为先前在CSS中定义的维度。尝试它,现在它应该已经工作了,但你可能会发现从一个州改变到另一个州太苛刻了。

CSS.转换为动画菜单

要使菜单上的类之间的交换机更光滑,我们将使用CSS转换。只需在其余的CSS旁边使用这段代码。

标题,nav, a, img, li{
  transition: all 1s;
  -moz-transition: all 1s; /* Firefox 4 */
  -webkit-transition: all 1s; /* Safari and Chrome */
  -o-transition: all 1s; /* Opera */
}

在这里,我们为所有CSS属性定义过渡<header>, <img> and <li>元素,基本上我们正在改变的所有元素。此代码将为两个类之间的更改设置为CSS转换为1秒。现在测试它,结果应该是一个更顺畅。

 

It’s your turn now

既然你已经看到了如何实现这种效果的容易,请继续并制作自己的调整大小菜单栏的版本。您也可以比我更具创意,更改更多的属性,如背景颜色,文本颜色和偶数和位置,甚至用不同类型的CSS转换测试,但请记住您的用户应该跟上使用菜单的更改。菜单和网站徽标通常是最识别和最预期的元素之一,并且通过急剧改变它可能会使用户混淆,因此请务必在两个版本之间保持一些相干性,并且始终将其与某些用户一起测试。

 

你有这样的菜单吗?你喜欢不同的技术吗?让我们在评论中知道。 

特色图片/缩略图, 手风琴映像 via Shutterstock.