📜  设计带有动画搜索框的导航栏

📅  最后修改于: 2021-11-24 04:39:13             🧑  作者: Mango

导航栏是网站最重要的组成部分之一。它是顶部栏,通常包含菜单形式的所有基本链接。

在本教程中,我们将创建一个包含以下组件的导航栏:

  • 菜单
  • 动画搜索栏
  • 登录图标
  • 标识

但在继续编写代码之前,让我们看看代码将使用哪些语言,基本结构和样式将使用 HTML CSS,以及用于动画搜索栏的 JQuery。

方法:

  • 使用 HTML 代码链接 jquery 和样式表。
  • 使用切换类为动画搜索栏设计 jquery 代码。
  • 使用nav类来构建要包含在导航栏上的元素。
  • 使用 CSS 将每个元素和整个导航栏设计为一个整体。

下面是上述方法的实现:

编码:

HTML


  

    
  
    
    
  
    
    
  
    
  
    
    
  
    

  

    

  


输出:

  • 仅将 HTML 文件与 jQuery 一起添加会产生以下结果:

  • 添加 CSS 样式表以及 HTML 和 jquery 代码将产生最终结果: