Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
Philosophy
About
Demos
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • Philosophy
  • About
  • Demos
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Category
Archive
Bootstrap

How to make a hover-able drop-down menu

photo of a hoverable and clickable bootstrap dropdown navigation item
August 23, 2019 by Diane Metcalf, M.S.I.T. No Comments

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:

  1. when a customer HOVERS on it, a dropdown menu will appear
  2. 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:

[email protected]

or

My Contact Page

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

diane-author-300x181 How to make a hover-able drop-down menu

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.

Read more

Reading time: 3 min

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • Why you need a customer thank-you page December 23, 2020
  • 10 things to do after creating your site November 8, 2020
  •  7 web design principles you should know October 15, 2020
  • Make your site mobile friendly with media queries September 18, 2020
  • Create a tiny browser icon for your site ID August 19, 2020

Older Posts

  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018

Tags

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

recent posts

  • Why you need a customer thank-you page
  • 10 things to do after creating your site
  •  7 web design principles you should know
  • Make your site mobile friendly with media queries
  • Create a tiny browser icon for your site ID

ImageAndAspect.com © 2020 Designed by ImageandAspect

 
This website or its third party tools use cookies to enhance our experience. More info CLICK HERE.