Recently a client requested a change to the “SHOP” link on her ecommerce site. (When clicked, a dropdown menu appeared.) She wanted the SHOP link to do two things:
- when a customer HOVERS on it, a dropdown menu will appear
- when the SHOP link is CLICKED, the Home page opens
Here’s how I did it, using Bootstrap:
Create the main Navbar using Bootstrap 3 (Framework HERE)
<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li><a href=”URL for Link 1 here”>Link 1 Name</a></li>
<li><a href=”URL for Link 2 here”>Link 2 Name</a></li>
<li><a href=”URL for Link 3 here”>Link 3 Name</a></li>
<li><a href=”URL for Link 4 here”>Link 4 Name</a></li>
To add a hoverable link that opens a dropdown menu, you will create that link next. Remember to DISABLE the dropdown-toggle to make the link hoverable. The HREF will open the new page when the link is clicked.
We’re still inside of the main navbar ul.
<li class=”dropdown”>
<a class=”dropdown-toggle disabled” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false” href=”URL to open a different page when clicked“>HOVER-ABLE/CLICKABLE LINK NAME </a>
Add another ul class that will contain the dropdown menu.
<ul class=”dropdown-menu”>
<li>
<a href=”URL here”>Link A Name</a>
</li>
<li>
<a href=”URL here”>Link B Name</a>
</li>
<li>
<a href=”URL here”>Link C Name</a>
</li>
</ul><!–dropdown ul menu–>
</li><!– dropdown li menu–>
</ul <!–navbar ul–>
</div><!– /navbar-collapse –>
</div><!– /container-fluid –>
</nav>
Make sure the bootstrap CSS link is in the document head, and jquery.min.js and bootstrap.js are at the end of your document, right before </body>, so the pages load faster. If the dropdown doesn’t work, it’s usually because the .js scripts are missing or incorrect.
Questions? Contact me:
or
Other articles you might like:
-How your personal brand makes the difference
-Using images: Tips to improve your SEO rankings
-10 Things to Do After Creating Your Website
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
