Html Question posted in
Some basic documentation can be found here.

how to create catagory option using html css and js

How can I create a category option with a dropdown menu on my website using HTML, CSS, and JavaScript?

I’m working on a website and I’m trying to implement a category selection feature. I want users to be able to select a category from a dropdown menu when they click on the category option.

I’m looking for guidance on how to implement this functionality using HTML, CSS, and JavaScript. Specifically, I need help with the code structure and any necessary event handling to make the dropdown menu appear when the category option is clicked.

Any assistance or example code snippets would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. 0

    Certainly! Below is an example of how you can create a category selection feature with a dropdown menu using HTML, CSS, and JavaScript. This example assumes that you want a simple dropdown that shows different categories when clicked:

    function toggleDropdown() {
  var dropdown = document.getElementById("categoryDropdown");
  dropdown.style.display = (dropdown.style.display === "block") ? "none" : "block";
}

function selectCategory(category) {
  var selectedCategory = document.getElementById("selectedCategory");
  selectedCategory.innerHTML = category;
  toggleDropdown(); // Hide the dropdown after selection
}
    .category-container {
  position: relative;
  display: inline-block;
}

.selected-category {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.category-dropdown {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #fff;
}

.category-dropdown li {
  padding: 10px;
  cursor: pointer;
}

.category-dropdown li:hover {
  background-color: #f0f0f0;
}
    <div class="category-container">
  <div class="selected-category" id="selectedCategory" onclick="toggleDropdown()">Select Category</div>
  <ul class="category-dropdown" id="categoryDropdown">
    <li onclick="selectCategory('Technology')">Technology</li>
    <li onclick="selectCategory('Science')">Science</li>
    <li onclick="selectCategory('Art')">Art</li>
    <!-- Add more categories as needed -->
  </ul>
</div>

    In this example, when a user clicks on "Select Category," the dropdown menu will appear, showing a list of categories. When a category is selected, the dropdown will hide, and the selected category will be displayed in the main area.

    Feel free to customize the categories, styling, and behavior based on your specific requirements.

    Login or Signup to reply.
  2. 0

    Here is the code snipet and explaination.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Category Dropdown</title>
  <style>
    /* Add some basic styling for the dropdown */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 10px 16px;
      width:90px;
      text-decoration: none;
      display: block;
       background-color: #c6cbcf;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>

  <div class="dropdown" id="categoryDropdown">
    <span>Category</span>
    <div class="dropdown-content">
      <a id='category1' href="#" onclick="selectCategory('Category 1')">Category 1</a>
      <a id='category2' href="#" onclick="selectCategory('Category 2')">Category 2</a>
      <a id='category3'href="#" onclick="selectCategory('Category 3')">Category 3</a>
      <!-- Add more categories as needed -->
    </div>
  </div>

  <script>
    // JavaScript function to handle category selection
    function selectCategory(category) {
     alert("Selected category: " + category);
      // You can perform additional actions here based on the selected category
    }
  </script>

</body>
</html>

    The HTML structure includes a div with the class dropdown, containing a span for the category title and a div with the class dropdown-content for the dropdown options.

    The CSS styles define the appearance of the dropdown and set it to be initially hidden. The dropdown content becomes visible when the user hovers over the category.

    The JavaScript function selectCategory is called when an option is clicked. It currently displays an alert with the selected category, but you can customize this function to perform any desired actions. And change the styles for these element as you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search