纯css导航栏的下拉菜单_如何使用纯HTML / CSS3创建现代的功能区横幅导航栏

最新推荐文章于 2024-01-15 01:40:35 发布

翻译最新推荐文章于 2024-01-15 01:40:35 发布 · 485 阅读

文章标签：

#css #html #java #js #python #ViewUI

本文介绍如何使用纯HTML和CSS3创建居中的功能区横幅导航栏，包括使用border-width属性创建三角形和调整IE浏览器兼容性。

纯css导航栏的下拉菜单

随着CSS3变得更加健壮并得到更广泛的支持，可以在没有图形的情况下创建有趣的现代设计元素的选项几乎是无限的！对于最近的项目，我决定看看是否可以使用纯CSS3创建居中的功能区横幅。本教程将引导您完成操作。

事实证明，由于border-width属性的神奇之处，它实际上非常容易，仅使用简单的语义HTML和一些CSS3技巧。唯一需要注意的是：与所有新CSS3技术一样，它在某些IE浏览器中可能会表现得有些奇怪……我们将在本教程的最后解决。

这是如何做：

步骤01：导航链接

我们要创建一个导航链接栏，因此我们将从一个简单的无序列表[ul]开始，并在[a]内添加链接。这是最基本的标记构建模块之一；非常适合创建要以类似方式设置样式的元素列表，例如我们将在此处执行的操作：

代码：

<!-- the navigation links -->

   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>

我们希望链接在页面上水平浮动，因此我们将添加以下样式：

首先，我们要从列表项目中删除项目符号样式，并使它们浮动到彼此的左侧，并在它们之间添加一些空间。

#navigation li {
        list-style: none;
        display: block;
        float: left;
        margin: 1em;
}

接下来，我们将添加一些文本阴影，删除链接下划线，并添加文本颜色和大小。

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0 .5em;
}

我还喜欢在悬停时添加一些柔和的动画效果：

#navigation li a:hover {
        margin-top: 2px;
}

为了添加星星，我放置了一个HTML实体✭ （看起来像✭）在每个链接中。这纯粹是装饰性的，不需要功能性。

至此，我们已经有了一个不错的可用导航链接部分，可以将其添加到页面中。但是我们将继续创建一个漂亮的功能区，以将这些链接放入其中。

步骤02：功能区横幅

我们将要使用的边框宽度技术确实要求我们在标记中添加4个额外的元素。尽管添加多余的元素并不理想，但从长远来看，它可能比加载额外的图形更有效，并且我们将使事情尽可能简单。

首先，我们将在链接周围创建一个容器元素。这将允许我们设置宽度以将所有横幅元素保持在一起：

<div id="navigation_container">

<!-- the navigation links -->

   <ul id="navigation">
      <li><a href="#">&#10029; link 1</a></li>
      <li><a href="#">&#10029; link 2</a></li>
      <li><a href="#">&#10029; link 3</a></li>
      <li><a href="#">&#10029; link 4</a></li>
   </ul>

<!-- end container -->
</div>

我们将添加以下样式来设置容器元素的宽度并居中：

#navigation_container {
   margin: 0 auto;
   width: 960px;
}

接下来，我们将添加将成为功能区主体部分的矩形：

<div id="navigation_container">

<!-- the ribbon body -->

      <div class="rectangle">

<!-- the navigation links -->

   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>

<!-- end container -->
</div>

我们将添加以下样式来创建功能区主体背景。我们将z-index设置为500，因为矩形需要堆叠在接下来要创建的三角形之上。我同时将-moz-box-shadow和box-shadow添加到了Firefox和-webkit / IE9中：

.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}

接下来，我们将三角形添加到功能区的边缘：

<div id="navigation_container">

<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

      <div class="rectangle">

<!-- the navigation links -->

   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>

<!-- end the ribbon body -->
   </div>

<!-- the right side of the fork effect -->
         <div class="r-triangle-top"></div>
         <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>

最后，我们将添加一些边框宽度魔术。关键在于为元素的每一侧设置透明的边框颜色，底部（顶部三角形）和顶部（底部三角形）除外。然后，我们将边框宽度设置为50px。这将创建一个等腰三角形，然后将其放置在色带主体后面：

.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: 1px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -40px;
   left: -150px;
}

我们将在右侧执行相同的操作：

.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   right: -45px;
   top: -107px;
}

.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   top: -149px;
   right: -145px;
}

我们完成了！这将在Firefox和Webkit浏览器中完美呈现。众所周知，IE无法使用这些CSS3属性，因此它在此处的呈现效果并不理想，但我们会尽力使用几个自定义样式表使其更加接近。

对于IE8和IE9，我们将通过“ ie.css”样式表添加一些自定义定位规则：

.l-triangle-top {
	left: 150px;
	top: 50px;
}
.l-triangle-bottom {
	left: 50px;
	top: -12px;
}
.r-triangle-top {}
.r-triangle-bottom {
	top: -169px;
}

为了安全起见（并且由于我们相信渐进式增强），我们还将添加针对IE7的修复程序，该修复程序可以放在页面的头部或单独的IE7样式表中。我选择的修复方法是在低于IE8的浏览器中简单隐藏三角形。 IE7支持browser-width属性，但是间距会有些许偏离。是否要花费额外的时间在IE7中重新定位元素取决于您：

<!--[if lt ie8]>

.r-triangle-bottom,
.r-triangle-top,
.l-triangle-bottom,
.l-triangle-top {
   display: none;
}
<![endif]-->

结语

背景图像只是出于娱乐目的-您可以添加自己的图像并围绕该文档构建...或者只是抓住其上方的所有内容并将其放入您自己的设计中。但是，为了全面起见，在这些图像中添加了以下CSS：

html{
background: #77d5fb url('bottom_bg.jpg') bottom center no-repeat;
}

body{
background: transparent url('top_bg.png') top center no-repeat;
width: 100%; 
height: 100%;
margin: 0 0;
}

鸣谢：图片来自iStockPhoto-我们无法通过演示分发底部的岛屿图片，但您可以在此处自行获取。

而已！

希望你们喜欢这个！请记住，这是一组相当新的技术...因此，如果您的目标是在人类已知的所有浏览器上实现100％的稳定性，则可以使用更稳定的方法来使用基本图像作为背景来实现此目的。在下面留下您的评论和问题;）

阅读有关创建丝带或折叠效果的更多信息：

创建3D丝带环绕效果（外加免费PSD！）

我认为针对今年流行的3d环绕式丝带效果创建教程可能会很有趣。这是增加设计深度的好方法，而且很容易完成。

访问帖子
快速提示：实用CSS形状

最近，一种常见的设计技术是创建折叠效果，这种效果看起来像是一个标题在其容器后面包裹着。这通常是通过使用微小的图像来实现的。但是，使用CSS，我们可以很容易地模仿这种效果。我会在四分钟内告诉您。

访问帖子

翻译自: https://webdesign.tutsplus.com/articles/how-to-create-a-modern-ribbon-banner-navigation-bar-with-pure-htmlcss3--webdesign-2728

纯css导航栏的下拉菜单

纯css导航栏的下拉菜单_如何使用纯HTML / CSS3创建现代的功能区横幅导航栏

步骤01：导航链接

步骤02：功能区横幅

结语

而已！

创建3D丝带环绕效果（外加免费PSD！）

快速提示：实用CSS形状