Thursday, January 28, 2016

Dropdown Menu


It is much more painful than it should be just to get a Dropdown menu working on blogspot.
Here is what I had to do...
  • I looked on the web for blogspot menus and tried a few but none seemed to work... 
  • JavaScript just seems to not work very well at all...
  • I found a pure css at w3schools that looked simple enough so I took it.
  • I modified it a bit and here is the final code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
    a.button, .dropbtn {
        color: black;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        background: #d9d9d9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy9Px3p3FbQl4pkkoo4fIfKy4snCRXQxARtxrSl0HKi7b_SYVR6zuV21D1ndewTHHRJZc6hjZkVAK1g2xWmPwKo7iaAZTMms2WXNgVuxAurPSeW6Jeu-_1LWyLrBv9yrWWTH8hD0X1Bvc/s1600/grad_light.png) repeat-x left bottom;
        background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
        background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=&#39;#d9d9d9&#39;, endColorstr=&#39;#bfbfbf&#39;, GradientType=0);
        box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
       -moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
       -webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        color: #333333;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        position: relative; z-index: 100;
    }

    .dropdown-content a:hover {
        background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
        background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
        background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=&#39;#d9d9d9&#39;, endColorstr=&#39;#bfbfbf&#39;, GradientType=0);
 }

    .dropdown:hover .dropdown-content {
        display: block;
        position: absolute; z-index: 100;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }  
  </style>

  • The important part that I added is the z-index
  • I tried placing this in the html widget together with the menu but that didn't work...
  • So I put it just before the </head> tag which you can access by the Edit HTML button in the Layout section.


  • Then the menu was still going behind the blog so I had to comment out overflow: hidden like so:

1
2
3
4
5
.tabs-outer {
/*overflow: hidden;*/
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

  • Then I went to widgets and selected html 


  • And entered the following code in:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="dropdown"><a href="http://legocaleb.blogspot.com/" class="button">Home</a></div><!--
--><div class="dropdown">
  <button class="dropbtn">Games</button>
  <div class="dropdown-content">
    <a href="http://legocaleb.blogspot.com/p/bgames.html">Board Games</a>
    <a href="http://legocaleb.blogspot.com/p/httpuploadwikimediaorgwikipediaen338sup.html">Eletronic Games</a>
  </div> 
</div><!--
--><div class="dropdown">
  <button class="dropbtn">Lego</button>
  <div class="dropdown-content">
    <a href="http://legocaleb.blogspot.com/p/lego-mocs.html">My MOCs</a>
    <a href="http://legocaleb.blogspot.com/p/lego-sets.html">Owned Sets</a>
  </div> 
</div><!--
--><div class="dropdown">
  <button class="dropbtn">TV & Anime</button>
  <div class="dropdown-content">
    <a href="http://legocaleb.blogspot.com/p/anime.html">Anime</a>
    <a href="http://legocaleb.blogspot.com/p/this-is-every-movie-i-remember-and-few.html">Movies</a>
    <a href="http://legocaleb.blogspot.com/p/tv-shows.html">TV Shows</a>
  </div> 
</div>
<br />
<br />


  • Finally I was done! A lot of work for a simple Dropdown menu!
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)