CSS带搜索导航栏示例代码

本篇文章小编给大家分享一下CSS带搜索导航栏示例代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

以下实例均是响应式的。

可以先看下效果图：

创建一个搜索栏

css;">

  
  
  
  

/* 在顶部导航栏中添加黑色背景颜色 */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
}
 
/* 设置导航栏的链接样式 */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/* 在悬停时更改链接的颜色 */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
 
/* 突出显示当前选中的元素 */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}
 
/* 设置导航栏的搜索框样式 */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}
 
/* 当屏幕宽度小于 600px 时，垂直堆叠显示菜单选项和搜索框 */
@media screen and (max-) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}

CSS 带搜索导航栏 - 带提交按钮

  
  
  
  

    

      
      提交
    
  



   
响应式搜索菜单
   
导航栏里面有一个搜索框。
   
调整浏览器窗口的大小, 查看效果。

CSS 带搜索导航栏 - 带搜索图标

  
  
  
  

    

      
      
    
  



  
响应式搜索菜单
  
导航栏里面有一个搜索框。
  
调整浏览器窗口的大小, 查看效果。