0

Is there a class specification in Bootswatch that displays a dropdown's menu items on hover rather than having the user click the menu? Thanks in advance.

Dan
  • 9,391
  • 5
  • 41
  • 73
physics90
  • 946
  • 3
  • 9
  • 24
  • Are you talking about a nav menu or a dropdown menu in a form? If nav check this out http://stackoverflow.com/questions/18863171/css-drop-down-menu-hover-effect – Dan Jul 18 '14 at 14:09
  • Someone just posted a link to an add-on but I’m not seeing their post any longer? Glitch? Looks like it’ll do the job, but I’ll look at Dan’s link job. – physics90 Jul 18 '14 at 14:15
  • possible duplicate of [How to make twitter bootstrap menu dropdown on hover rather than click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) – Dan Jul 18 '14 at 14:15
  • should I remove this question then? – physics90 Jul 18 '14 at 14:26

1 Answers1

2

use below mentioned code using jquery for hover functionality.

Please refer this JS Fiddle

<script type='text/javascript'>
    $(document).ready(function () {
        $(".dropdown").hover(function () {
            $(this).addClass("open");
        }, function () {
            $(this).removeClass("open");
        });
    });
</script>

Regards D.

DevangKantharia
  • 704
  • 3
  • 10
  • This is made using the Bootswatch theming...! I am sorry, but there is no particular class that you can use for it...you just need to toggle the ".open" class for hover effect. – DevangKantharia Jul 18 '14 at 14:25
  • Thanks, Devang. I’m guessing (not very familiar with jquery) that I can just add this code snippet to my html page? I’m using Visual Studio 2013 and WebForms if that makes in difference. – physics90 Jul 18 '14 at 14:36
  • That is not a problem. You just need to make sure if jquery is already added in your project, and if not then you need to add this script `` in the head section of the page, and write the code in `$(document).ready(function () { \\code here });` – DevangKantharia Jul 18 '14 at 14:44
  • Nice solution. Two questions. (1) Does this interfere when browsing on a mobile device; (2) Wonder if this snippet could be placed inside a .js file and included as a resource or something like that? – physics90 Jul 18 '14 at 15:05
  • (1)Unfortunately, hover effect is not supported in mobile browser, so for this, you need to write a click event for mobile browsers for the same effect and (2) Yes, you can write the code in external js file, and include as a resource in your project. In that .js file you need to add just `$( document ).ready(function() { //code here } );` and include the new resource file after including `` file as described above – DevangKantharia Jul 18 '14 at 15:16
  • Thanks, Devang. Actually, what I meant was will this jquery snippet affect the toggle event in bootswatch? Added it as the correct answer. Thanks for your help. – physics90 Jul 18 '14 at 15:28
  • Thank you for it, and yes, it can affect the toggle event in bootswatch. And for this i suggest you instead of using `$(".dropdown").hover(function () {`, you need to add a new selector targeting only navigation bar, that is `$(".nav .dropdown").hover(function () {` - Regards D. – DevangKantharia Jul 18 '14 at 20:32
  • Bootstrap 3.x has a dependency on jQuery 1.9 or greater. – IrishChieftain Aug 29 '14 at 20:41