CSS导航栏

GUI下方有一个导航栏或导航系统，可帮助访问者访问信息。它是网页上的UI元素，其中包含网站其他部分的链接。

导航栏通常以水平链接列表的形式显示在页面顶部。可以将其放置在徽标或标题的下方，但应始终将其放置在网页的主要内容之前。

网站具有易于使用的导航非常重要。它在网站中起着重要作用，因为它允许访问者快速访问任何部分。

让我们详细讨论水平导航栏和垂直导航栏。

水平导航栏

水平导航栏是水平链接列表，通常位于页面顶部。

让我们通过一个示例来了解如何创建水平导航栏。

例

在此示例中，我们添加了overflow：hidden属性，该属性防止li元素进入列表之外，display：block属性将链接显示为block元素，并使整个链接区域可单击。

我们还添加了float：left属性，该属性使用float来使块元素彼此相邻滑动。

如果要使用全角背景色，则必须将background-color属性添加到

而不是元素。

  
Home
  
Java
  
HTML
  
CSS

边界分隔线

我们可以使用border-right属性在导航栏中的链接之间添加边框。以下示例对其进行了更清晰的说明。

例

  
Home
  
Java
  
HTML
  
CSS

固定导航栏

滚动页面时，固定的导航栏位于页面的底部或顶部。参见相同的示例。

例

  
Home
  
Java
  
HTML
  
CSS

Hello World
Scroll down the page to see the fixed navigation bar

粘性导航栏

位置：粘性；属性用于根据用户的滚动位置来定位元素。

此CSS属性允许元素在滚动到达特定点时停留。根据滚动位置，粘性元素可以在固定属性和相对属性之间切换。

例

 Example of sticky navigation bar

  
Home
  
Java
  
HTML
  
CSS

Hello World
Scroll down the page to see the sticky navigation bar

下拉导航栏

以下示例说明了如何在导航栏中创建下拉菜单。

例

  
Home
  
Java
  
C
  
C++
  

    Web-designing
    

      HTML
      CSS
      Bootstrap
    
  

Welcome to the javaTpoint.com
Example of Dropdown Menu inside a Navigation Bar
Move your cursor on the "web-designing" to see the dropdown effect.

垂直导航栏

在此示例中，我们将看到如何构建垂直导航栏。

例

Vertical Navigation Bar


  
Home
  
Java
  
CSS
  
HTML
  
Bootstrap

我们可以将链接对准中心并在它们之间添加边框。参见相同的示例。

例

在此示例中，我们添加了text-align：center;财产

• 并将链接和border属性居中
  添加边框。我们还将border-bottom属性添加到所有
  • 元素。

    
    
    
    
    
    
    
    Vertical Navigation Bar
    
    
      
    Home
      
    Java
      
    CSS
      
    HTML
      
    Bootstrap
    
    
    
    
    

    全高固定垂直导航栏

    我们还可以使用属性height：100％;创建固定的全高侧面导航栏。和位置：固定；

    例

    
    
    
    
    
    
    
    
    Home
    Java
    CSS
    HTML
    Bootstrap
    
    
    Welcome to the javaTpoint.com
    Side navigation bar with height: 100%; and position: fixed;
    Scroll the page, and see how the sidenav sticks to the page