How to – ສ້າງເມນູນຳທາງດ້ານເທິງ

ຮຽນຮູ້ວິທີສ້າງແຖບເມນູນໍາທາງດ້ານເທິງສຸດດ້ວຍ CSS.

index

ຂັ້ນຕອນທີ່ 1 ເພີ່ມໂຄ້ດ HTML ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ HTML:

<div class="topnav">
        <a href="#home">Home</a>
        <a href="#Service">Service</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>

ຂັ້ນຕອນທີ່ 2 ເພີ່ມໂຄ້ດ CSS ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ CSS:

/* ເພີ່ມສີພື້ນຫຼັງສີດຳໃສ່ເມນູທາງເທິງສຸດ */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* ຈັດຮູບແບບລິ້ງພາຍໃນແຖບເມນູ */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* ປ່ຽນສີຂອງລິ້ງຢູ່ໃນ ເວລາເອົາເມົາຊີ້ */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top