首页 > 其他分享 >css35 CSS Navigation Bar

css35 CSS Navigation Bar

时间：2024-06-01 16:12:29浏览次数：17  
标签：none Bar color css35 li padding background text Navigation

https://www.w3schools.com/css/css_navbar.asp

Demo: Navigation Bars

 

Navigation Bars

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul> 
<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

 

Now let's remove the bullets and the margins and padding from the list:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

Example explained:

  • list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
  • Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

 

 

CSS Vertical Navigation Bar

Vertical Navigation Bar

 

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code from the previous page:

Example

li a {
  display: block;
  width: 60px;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>

 

Example explained:

  • display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
  • width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>

 

 

Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:

 

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on:

 

 

 

Example

.active {
  background-color: #04AA6D;
  color: white;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.

Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:

 

 

Example

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
} 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

 

Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation:

 

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
} 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

 

Note: This example might not work properly on mobile devices.

 

标签：none,Bar,color,css35,li,padding,background,text,Navigation
From： https://www.cnblogs.com/emanlee/p/18226056

相关文章

  • 使用 Vue 3 和 JsBarcode 开发一维码显示组件
    在现代前端开发中，条形码（或称一维码）在许多应用场景中非常常见，例如商品管理、物流跟踪等。本文将介绍如何使用Vue3和JsBarcode库来创建一个灵活的一维码显示组件，并展示如何在应用中使用它。1.安装必要的依赖首先，我们需要安装Vue3和JsBarcode。如果你还没有创建Vue3......
  • QOJ 4824 Bracket-and-bar Sequences
    考虑到这个实际上没有特别好的表示方法。不如从\(n\le25\)，猜想合法的序列数量不多。考虑对这个计数。类似于合法括号序计数，考虑把串拆为\(\texttt{(}\cdots\texttt{|}\cdots\texttt{)}\cdots\)来考虑。那么令\(f_i\)表示\(i\)对\(\texttt{(|)}\)组成的序列的数量。......
  • 容器组件Tabs如何自定义 tabBar-高亮切换
    1.TabBar如果放在底部的话，一般会显示图形和文字，甚至有特殊的图标，如果要实现此类效果，就需要自定义tabBarTabs(){TabContent(){//内容略}.tabBar(this.tabBarBuilder())}@BuildertabBarBuilder(){//自定义的Tabbar结构}2.自定义TabBa......
  • Windows 7 任务栏开发 之 进度条（Progress Bar）
         上一篇我们完成了“覆盖图标”（OverlayIcon）的相关开发，本篇我们将对进度条特性进行研究。在使用IE下载文件时，任务栏图标会同步显示当前下载进度（如下图）。那么在应用程序中如何实现这个效果呢？ 下载状态 TaskbarManager.SetProgressValue 方法      在Tas......
  • JUC框架（Semaphore、CountDownLatch、CyclicBarrier）
    文章目录Semaphore(信号量)Semaphore介绍Semaphore基本概念Semaphore使用场景Semaphore示例CountDownLatch（计数器/闭锁）CountDownLatch介绍CountDownLatch基本概念CountDownLatch使用场景CountDownLatch基本方法CountDownLatch示例CyclicBarrier(循环栅栏)Cyclic......
  • 使用 Unity Barracuda 和 Compute Shader，Yolov2 进行高效物体识别
    前言通过整合UnityBarracuda和TinyYOLOv2模型，开发者可以在Unity中实现高效的实时物体识别功能。这种技术不仅可以增强游戏和应用的交互性，还可以应用于虚拟现实（VR）和增强现实（AR）等创新项目中，为用户创造更加沉浸和动态的体验。TinyYOLOv2模型概述TinyYOLOv2是YOLO（You......
  • wxPython==4.2.1 aui.AuiToolBar 如何去掉烦人的抓手？
    aui.AuiToolBar如何去掉烦人的抓手？最近在用wxPython做一些GUI小应用，发现工具栏总有几个点（抓手），很影响美观，如下：目前官方没有提供隐藏抓手的功能,需要更改源码的auibar.py文件注释掉对应代码。如下：#注释这句,大致在auibar.py+3480（不同版本可能有差异）#self._art.DrawGrip......
  • Minecraft中BossBar、Recipe的底层实现与扩展应用(学习笔记)
    看到有位博主写得很不错，直接上链接:《进度条与自定义合成表》本人在学习这篇博客的基础上进行实践与验证（使用1.12Bukkit接口开发）,对上面的文件做几点总结与补充:正如文中所说，一定要记得在插件卸载时对注册的进度条和合成配方进行注销。文中所说的对进度条进行卸载的方法Buk......
  • Semantic Kernel入门系列：利用Handlebars创建Prompts functions
    引言本章我们将学习通过HandlebarsPromptsTemplate来创建Promptsfunctions。什么是Handlebars？Handlebars是一个流行的JavaScript模板引擎，它允许你通过在HTML中使用简单的占位符来创建动态的HTML。它使用模板和输入对象来生成HTML或其他文本格式。Handlebars模板看......
  • 【unity】在EditorWindow添加自定义的Toolbar按钮
    好久没写了，最近做工具，写了个EditorWindow，为了让使用者方便查看这个工具的文档，想着在导航栏加个问号按钮，点一下打开说明文档就完事~查了下unity手册，发现Unity提供了一个ShowButton 方法，用于在自定义Editor窗口的工具栏中添加自定义内容，下面是实现的例子：privateGUIStyle......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99