CSS Navigation Menu

ในเนื้อหาส่วนนี้เป็นตัวอย่างการทำ Navigation Menu ที่ประกอบไปด้วยเมนูแบบแนวตั้้ง (Vertical Menu) และแนวนอน (Horizontal Menu) 

 

1.เมนูแนวตั้ง (Vertical Menu)

ขั้นที่ 1 สร้างรายการเมนูด้วย element <ul> , <li> และ <a>

<html>
  <body>

    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>


  </body>
</html>

ไฟล์ที่ 1.1 

 

ขั้นที่ 2 เพิ่ม style ในส่วนหัวเพื่อจัดรูปแบบเมนูให้สวยงาม

<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;
        background-color: rgb(59, 159, 255);
        color: #fff;
        padding: 8px 16px;
        text-decoration: none;
      }

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

    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>


  </body>
</html>

ไฟล์ที่ 1.2

 

ขั้นที่ 3 เพิ่มส่วนสำหรับแสดงผลเนื้อหา

<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;
        background-color: rgb(59, 159, 255);
        color: #fff;
        padding: 8px 16px;
        text-decoration: none;
      }

      li a:hover:not(.active) {
        background-color: #555;
        color: white;
      }
      div{
       margin-left:25%;
       padding:1px 16px;
       height:1000px;
      }
    </style>
  </head>
  <body>

    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>

    <div>
    	ส่วนของการแสดงผลเนื้อหา
    </div>

  </body>
</html>

ไฟล์ที่ 1.3

ไฟล์ที่ 1.3 เพิ่ม element <div> และจัดตำแหน่ง และขนาดให้เหมาะสมกับการแสดงผล

 

2.เมนูแนวนอน (Honrizontal Menu)

ขั้นที่ 1 สร้างรายการเมนูด้วย element <ul>, <li> และ <a>

<html>
  <body>

    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>

  </body>
</html>

ไฟล์ที่ 2.1

 

ขั้นที่ 2 กำหนดรูปแบบรายการด้วย CSS 

<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 4px;
        padding: 8px;
        background-color:#6f6f6f;
      }

      li {
        display: inline;
        padding:8px;
      }
      li:hover{
        background-color: rgb(59, 150, 255);
      }
      a{
      	text-decoration:none;
        color: white;
        font-size:18px;
        font-weight:bolder;
        text-align:center;
      }
    </style>
  </head>
  <body>

    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
    
    <h1>Horizontal Menu</h1>

  </body>
</html>

ไฟล์ที่ 2.2

ไฟล์ที่ 2.2 กำหนดรูปแบบรายการเมนู ให้อยู่ในแนวนอนด้วย li{display:inline;} 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: