Author: priteshbhoi18

Vertical three dots with toggle menu like web whatsapp

Posted on by priteshbhoi18 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <style>
            *{margin: 0;padding:0px}

            .header{
                width: 100%;
                background-color: #0d77b6 !important;
                height: 60px;
            }

            .showLeft{
                background-color: #0d77b6 !important;
                border:1px solid #0d77b6 !important;
                text-shadow: none !important;
                color:#fff !important;
                padding:10px;
            }

            .icons li {
                background: none repeat scroll 0 0 #fff;
                height: 7px;
                width: 7px;
                line-height: 0;
                list-style: none outside none;
                margin-right: 15px;
                margin-top: 3px;
                vertical-align: top;
                border-radius:50%;
                pointer-events: none;
            }

            .btn-left {
                left: 0.4em;
            }

            .btn-right {
                right: 0.4em;
            }

            .btn-left, .btn-right {
                position: absolute;
                top: 0.24em;
            }

            .dropbtn {
                background-color: #4CAF50;
                position: fixed;
                color: white;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }

            .dropbtn:hover, .dropbtn:focus {
                background-color: #3e8e41;
            }

            .dropdown {
                position: absolute;
                display: inline-block;
                right: 0.4em;
            }

            .dropdown-content {
                display: none;
                position: relative;
                margin-top: 60px;
                background-color: #f9f9f9;
                min-width: 160px;
                overflow: auto;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }

            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

            .dropdown a:hover {background-color: #f1f1f1}

            .show {display:block;}

        </style>
        <script>
            function changeLanguage(language) {
                var element = document.getElementById("url");
                element.value = language;
                element.innerHTML = language;
            }

            function showDropdown() {
                document.getElementById("myDropdown").classList.toggle("show");
            }

            // Close the dropdown if the user clicks outside of it
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {
                    var dropdowns = document.getElementsByClassName("dropdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="header">

            <!-- three dot menu -->
            <div class="dropdown">
                <!-- three dots -->
                <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- menu -->
                <div id="myDropdown" class="dropdown-content">
                    <a href="#home">Home</a>
                    <a href="#about">About</a>
                    <a href="#contact">Contact</a>
                </div>
            </div>

        </div>
    </body>
</html>
Open in Codepen
Buy Me A Coffee
Advertisement

OnClick List Open Using Jquery

Posted on by priteshbhoi18 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>A Nested List</h2>
<div id="mylist">
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</div>
/* CSS */
ul li ul {
  display: none; /* Hide the nested list first */
}
ul li.active ul {
  display: block; /* Show the list when class 'active' is added to the li */ 
  color: red;
}
// JavaScript
jQuery( "li:has(ul)" ).click(function(){ // When a li that has a ul is clicked ...
	jQuery(this).toggleClass('active'); // then toggle (add/remove) the class 'active' on it. 
});
Buy Me A Coffee