Today I have learned Navbars in javascript

 Navbar in javascript:

Now’s a good time to code up the logic for toggling the navigation menu so we can test that the toggle button works. Ideally, you’d want to put this in a separate module to avoid leaking variables into the global scope, or wrap the whole thing in an immediately invoked function expression the old-fashioned way.

Navigation bars (also known as navbars) are practically everywhere on modern websites, so it’s good to know how to create one by hand without relying on a component library that does all of the heavy lifting for you. But if you’ve never created a navbar from scratch, you may find it intimidating to get started.

For this reason, people often turn to CSS frameworks like Bootstrap to build navbars so that they don’t have to reinvent the wheel. Yet what usually ends up happening is that you get lost in a sea of obscure class names and behavior that’s difficult to customize. You waste many frustrating hours on StackOverflow when instead you could’ve simply built the thing by hand in less time.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#">Link1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </li>
</ul>
<div>
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link " data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="home" class="container tab-pane fade"><br/>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane active"><br/>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br/>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
  </div>
  <div>
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>
Output:

Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Student Management System with React.js and NestJS

  🚀 My Journey Creating a Student Management System 🌟 I'm excited to share my recent project — a Student Management System ! This project gave me hands-on experience in building a full-stack application, enhancing both my frontend and backend development skills. 💡 Project Overview The Student Management System is designed to help educational institutions efficiently manage student data, including enrollment, attendance, and performance. The goal was to create a user-friendly platform for both students and administrators. 🔨 Tech Stack Used ✅ Frontend: JavaScript, HTML, CSS, React.js ✅ Backend: TypeScript, NestJS, Node.js ✅ Database: MongoDB (with _id for unique identifiers) 🌟 Key Features ✔️ Student Registration – Easy registration with unique ID management ✔️ Attendance Tracking – Real-time updates on student attendance ✔️ Performance Reports – Generate and view student performance reports ✔️ Admin Panel – Secure access for administrators to manage student...
Read more

Today I have solved the problem in javascript

 Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6. const mice = [1, 4, 9, 15]; const holes = [10, -5, 0, 16]; function minSteps(mice, holes) {    mice.sort((a, b) => a - b);     holes.sort((a, b) => a - b); let maxSteps = 0;     for (let i = 0; i < mice.length; i++) {         let steps = Math.abs(mice[i] - holes[i]);         if (steps > maxSteps) {             maxStep...
Read more

Today I have solved the problem in javascript

 The United States uses the imperial system of weights and measures, which means that there are many different, seemingly arbitrary units to measure distance. There are 12 inches in a foot, 3 feet in a yard, 22 yards in a chain, and so on. Create a data structure that can efficiently convert a certain quantity of one unit to the correct amount of any other unit. You should also allow for additional units to be added to the system. function convert(quantity, fromUnit, toUnit) {   if (!conversions[fromUnit] || !conversions[toUnit]) {     return "Invalid units";   }   return quantity * conversions[fromUnit][toUnit]; } const conversions = {   inch: {     foot: 1 / 12,     yard: 1 / 36,     mile: 1 / 63360,        },   foot: {     inch: 12,     yard: 1 / 3,     mile: 1 / 5280,        },   yard: {     inch: 36,     foot: 3,  ...
Read more