I am searching for websites that showcase categorized drop-down options for inspiration.
Some examples could be:
Fruit
Vegetables
Herbs
The main headings would not be clickable, only the sub-options would be.
I have seen websites implement this design before, but I am having trouble finding a good example.
Do you know of any websites that use this format?
Here is a dropdown menu featuring various categories.
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>Utilize the navbar feature in Bootstrap along with dropdown menus to complete this task:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>In this code snippet, you will only see the "smartphone version" due to the width of the snippet window. Copy the code and test it in a full page to see the complete functionality. The parent elements can be clicked to reveal dropdown child elements, and the child elements can be clicked to navigate to a different page.
You have the option to implement this using pure HTML or jQuery.
Here is an example using pure HTML:
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>
Now, here is an example using jQuery:
<div class="dropdown">
<a id="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu" style="display:none;">
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Peach</li>
<li>Melon</li>
</ul>
<h3>Vegetables</h3>
<ul>
<li>Asparagus</li>
<li>Beetroot</li>
<li>Broccoli</li>
</ul>
<h3>Herbs</h3>
<ul>
<li>Basil</li>
<li>Dill</li>
<li>Ginger</li>
</ul>
</div>
</div>
And here is the jQuery code to toggle the dropdown menu:
<script>
$('#dropdown').click(function(event) {
$('.dropdown-menu').slideToggle();
});
</script>
Recently, I created a drag and drop multiple file upload feature with individual progresses, which has been working well. However, there is one issue that I have encountered. During the uploading of larger files, sometimes the browser freezes until the upl ...
I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...
When writing our automated tests, a typical line of code we use looks like this: find('.edit-icon').click As we move towards incorporating css-modules in our project, I've been informed that class names could undergo significant changes. A ...
If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...
After duplicating one of the HTML pages in my project, I simply changed the file extension from .html to .php. Surprisingly, all browsers display the page identically except for Internet Explorer (IE), which seems to handle the pages differently based on t ...
I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...
My div is populated with dynamically added records. Whenever I click on the 'Remove' link, a confirmation box pops up multiple times corresponding to the number of records present in the div. I want the confirmation box to appear only for the spe ...
I'm trying to create a script that toggles between the "like" and "unlike" images, but for some reason it's not working. I'm new to javascript so any help would be appreciated. <script> function toggleImage(){ var like ...
Just starting to learn HTML, CSS through an online course and currently working on a simple website. The table of contents on my website is centered, but when I resize the browser on my 27-inch iMac, it doesn't stay centered. Any tips? Here's a s ...
I am currently facing the issue where the same image is loading twice for a single preview. The first time the image is loaded for preview purposes in an iframe. The second time, the image metadata such as width and height are fetched with the same path. ...
I have been making updates to the charity website I manage, heroinitiative.org. You can view the revamp progress here: (please note that this is not live code, it is simply for my boss to see the progress and does not need to be kept secret, hence why I a ...
Why when I click the register button, it redirects me to the register_db.php page instead of sending the data to the database and keeping me on the same register.php page? I want the data to be sent to the database without changing the webpage. register.p ...
I am looking to display text in my textarea with the same width in pixels across all devices. Essentially, I want to set the character width in pixels so that it appears consistently on any device (Desktop/Mobile). <html> <head> <styl ...
Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...
I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...
Ever since I stumbled upon AMCSS, I have been utilizing standalone attribute selectors. Recently, I made the switch from Compass to cssnext, only to discover that syntax highlighting appears to be malfunctioning in Atom and other platforms where I tested i ...
Looking to create a responsive sidebar based on this specific design https://i.sstatic.net/YKy6Z.png https://i.sstatic.net/qwTuJ.png Link to design on Figma Key focus is implementing the "< 4/12 >" functionality and ensuring it is respo ...
Let me provide an example of my desired approach. :all() { &, &:link, &:visited, &:active, &:focus } The concept above involves a 'custom selector' that encompasses all pseudo-classes of an anchor tag, e ...
I am looking to add functionality to make a cell in an HTML table clickable. When this action is triggered, I want a pop-up or window to appear with specific information. Below is my current HTML code: <table class="table1"> <thead> <tr ...
I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...