Your Questions Answered: How do I create a responsive dropdown menu with Bootstrap?
As a follow-up to our tutorial on creating a responsive slideshow using bootstrap, we continue with your next request: A responsive drop down menu using bootstrap. And like the bootstrap slideshow, this one is going to be just as simple.
Let’s get started.
Create an HTML page for the drop down menu:
- Launch Dreamweaver
- Select Site > New Site.
- In the dialog box that appears, enter the following information:
a) Site Name
b) Local Site Folder: Click the Browse or Folder icon. Navigate to any of your local folders you want to use for this
c) Click Save - Create an image folder under the Site you just created and call it “img”.
- Copy your images to this
- Select File >
- Select Blank Page, page type as HTML, and Layout as
- Save the page as html
Creating the dropdown menu
- Open the page http://getbootstrap.com/components/#dropdowns
- Under the Example section for Dropdowns, click Copy in the code
- In Dreamweaver, paste the copied contents in between the
- Copy the following piece of code after the title
- Save
- Select File > Preview in Browser, and select a browser in which you want to preview the You should now see the drop down menu in your browser.
https://blog.adobe.com/media_6896d3ee876bbc4c8ba80517cd0b7c556b71c8b5.gif
What exactly did you do?
The code you copied below the title tags contains links to CSS and JavaScript files that are required for your dropdown menu. Except for the structure of the menu that is defined in the body section of your HTML page, the rest of the information is contained in these files.
You can download the completed version of this HTML page from this location
See a description of the classes that were used to create the dropdown menu. The Bootstrap Components page also provides you with information on customizing your drop down menu. Explore the various sections of the page to create a dropdown menu that best suits your requirements.
Happy Coding!