JavaScript + CSS + HTML 单页切换导航菜单界面设计

素颜马尾好姑娘i 2022-03-21 15:36 220阅读 0赞

## ##

### 单页切换导航菜单界面设计 ###

在撸码之前先来看看效果图：

![20190203110744374.gif][]

该页面效果中，在页面的左侧垂直排放一组导航按钮，当点击导航按钮时，相应的页面内容会在屏幕右侧显示。

### 代码实现 ###

HTML 页面设计：需引入下文的 JavaScript 脚本和 CSS 修饰

onkeyup = "SomeJavaScriptCode"：事件会在键盘按键被松开时发生。

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>SomeJavaScriptCode</td> 
   <td>必需。规定该事件发生时执行的 JavaScript。</td> 
  </tr> 
 </tbody> 
</table>

<body>
    <div class="row">
      <div class="left" style="background-color:#bbb;">
        <h2>菜单</h2>
        <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索.." title="输入分类">
        <ul id="myMenu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">PHP</a></li>
          <li><a href="#">Python</a></li>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">SQL</a></li>
          <li><a href="#">Bootstrap</a></li>
          <li><a href="#">Node.js</a></li>
          <li><a href="#">中文分类</a></li>
        </ul>
      </div>
      
      <div class="right" style="background-color:#ddd;">
        <h2>内容</h2>
        <p>在搜索框输入菜单列表的分类名搜索对应内容。</p>
        <p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
        <p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
        <p>Some text..</p>
      </div>
    </div>
    </body>

JavaScript 脚本：

1.  获得搜索框的输入字符
2.  把输入的字母逐一更改为大写
3.  获得导航栏分类，并匹配是否包含输入的子串

CSS 修饰：

**选择器：**

*  \*  选择所有元素
 *  .class  选择 class="" 的所有元素
 *  \#id  选择 id="firstname" 的所有元素

**flex 的定义和用法：**

*  flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
 *  flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

@charset "utf-8";
    /* CSS Document */
    
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    /* *x选择器：选择所有元素 */
    * {
      box-sizing: border-box;
    }
    
    /* 使用Flexbox创建一个列布局 
    flex 的定义和用法
    1.flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
    2.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
    注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
    */
    .row {
      display: flex;
    }
    
    /* 左列(菜单) */
    .left {
      flex: 15%; /*让所有弹性盒模型对象的子元素的长度为15%，且忽略它们内部的内容*/
      padding: 15px 0;
    }
    
    .left h2 {
      padding-left: 8px;
    }
    
    /* 右侧(内容) */
    .right {
      flex: 85%; /*让所有弹性盒模型对象的子元素的长度为85%，且忽略它们内部的内容*/
      padding: 15px;
    }
    
    /* 搜索框 */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border:1px solid #ddd;
    }
    
    /* 左侧导航 */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    /*左侧导航标签*/
    #myMenu li a {
      background-color: #BBBBBB;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }
    
    /*左侧导航标签效果*/
    #myMenu li a:hover {
      background-color: #eee;
    }

这里的单页切换导航菜单界面设计仅适合初学者了解导航菜单设计的过程，在项目中的具体运用还需要完善功能、效果、布局等因素和个各种页面或者内容的异常处理。可以结合以上的设计逻辑，根据业务需求就行修改运用。

[20190203110744374.gif]: /images/20220321/6bed976eb9e447a886b5ae25fe7fb889.png