JS Code to Add a Dropdown Menu to Your Google Blogger

HTML Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="topnav" id="myTopnav">

<div class="dropdown">

    <button class="dropbtn"><b>Mechanism of wireless communication</b>

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

<a href="https://www.salimwireless.com/2022/05/mechanism-of-wireless-communication.html"><b>Mechanism of wireless communication - step by step</b></a>

<a href="https://www.salimwireless.com/2021/11/pathloss-in-wireless-communication.html"><b>Pathloss &amp; Delay spread in Modern Wireless Communication Systems</b></a>

<a href="https://www.salimwireless.com/2021/11/channel-impulse-response-doppler-shift.html"><b>CIR, Doppler Shift &amp; Gaussian Random Variable</b></a>

<a href="https://www.salimwireless.com/2022/05/relationship-between-ber-and-snr.html"><b>BER vs SNR</b></a>

</div>

</div>

<div class="dropdown">

    <button class="dropbtn"><b>ASK, FSK, PSK, M-ary ...</b>

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

<a href="https://www.salimwireless.com/2022/03/m-ary-modulation.html"><b>M-ary Modulation | QPSK &amp; QAM</b></a>

<a href="https://www.salimwireless.com/2021/12/tdm-fdm-cdma.html"><b>ASK, FSK, PSK<br /><br />FDM, TDM, CDMA</b></a>

<a href="https://www.salimwireless.com/2021/12/ofdm-technique-4g.html"><b>OFDM</b></a>

</div>

</div>

<div class="dropdown">

    <button class="dropbtn"><b>Ionospheric Scintillation</b>

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

<a href="https://www.salimwireless.com/2022/05/how-ionospheric-scintillation-disturbs.html"><b>Ionospheric Scintillation</b></a>

<a href="https://www.salimwireless.com/2022/04/am-microwave-long-distance-link.html"><b>Low and Mid-frequency band communication</b></a>

</div>

</div>

<div class="dropdown">

    <button class="dropbtn" ><b>2G, 3G, 4G, &amp; 5G</b>

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="https://www.salimwireless.com/2021/12/5g-challenges.html"><b>What&#39;s new in 5G</b></a>

     

      <a href="https://www.salimwireless.com/2022/05/the-evolution-of-mobile-wireless.html"><b>2G, 3G, 4G</b></a>

    </div>

  </div>

<div class="dropdown">

    <button class="dropbtn"><b>Programming</b>

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

<a href="https://www.salimwireless.com/2022/05/c-programming-for-electronics-industry.html"><b>C, C++</b></a>

<a href="https://www.salimwireless.com/2022/03/how-is-python-different-from-c-java.html"><b>Python</b></a>

<a href="#"><b>Webdesign &amp;#9660;</b></a>

<a href="https://www.salimwireless.com/2021/11/wordpress-installation-web-development.html"><b>WordPress</b></a>

<a href="https://www.salimwireless.com/2021/11/wordpress-installation-web-development.html#p3"><b>Webdesign<br /><br />Learn HTML &amp; CSS</b></a>

 

<a href="https://www.salimwireless.com/2022/03/clause-to-retrieve-data-from-database.html"><b>Node.js + MySQL</b></a>

</div>

</div>

<a href="https://www.salimwireless.com/2021/12/overview.html"><b>About</b></a>

<a href="#ContactForm1"><b>Contact</b></a>

<a class="active" href="#subscribe"><b>Subscribe</b></a>

   

<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()"><b>&amp;#9776;</b></a>

CSS Code

h1 {

            text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,

                0 3px 0 #ccc, 0 4px 0 #ccc,

                0 5px 0 #ccc, 0 6px 0 #ccc,

                0 7px 0 #ccc, 0 8px 0 #ccc,

                0 9px 0 #ccc, 0 10px 0 #ccc,

                0 11px 0 #ccc, 0 12px 0 #ccc,

                0 20px 30px rgba(0, 0, 0, 0.5);

color: white;

        }

body {margin:0;font-family:Arial}

.topnav {

  overflow: hidden;

  background-color: #292929;

}

.topnav a {

  float: left;

  display: block;

  color: #fff;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

.active {

  background-color: #7baaf7;

  color: white;

  border-radius: 10px;

}

.topnav .icon {

  display: none;

}

.dropdown {

  float: left;

  overflow: hidden;

}

.dropdown .dropbtn {

  font-size: 17px;    

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #7baaf7;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

border-radius: 10px;

}

.dropdown-content a {

  float: none;

  color: #fff;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}

.topnav a:hover, .dropdown:hover .dropbtn {

  background-color: #7baaf7;

  color: white;

border-radius: 10px;

}

.dropdown-content a:hover {

  background-color: #7baaf7;

  color: black;

}

.dropdown:hover .dropdown-content {

  display: block;

}

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child), .dropdown .dropbtn {

    display: none;

  }

  .topnav a.icon {

    float: right;

    display: block;

  }

}

@media screen and (max-width: 600px) {

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

  .topnav.responsive .dropdown {float: none;}

  .topnav.responsive .dropdown-content {position: relative;}

  .topnav.responsive .dropdown .dropbtn {

    display: block;

    width: 100%;

    text-align: left;

  }

}

JavaScript Code

function myFunction() {

  var x = document.getElementById("myTopnav");

  if (x.className === "topnav") {

    x.className += " responsive";

  } else {

    x.className = "topnav";

  }

}