Menu
I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?
409
Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.
The kebab menu, also known as the three dots menu, and the three vertical dots menu, is an icon used to open a menu with additional options. The icon is most often located at the top-right or top-left of the screen or window. The picture shows an example of the kebab menu icon in Google Chrome.
using an unicode char
.test:after { content: '\2807'; font-size: 100px; }<div class="test"></div>using background property
div { width: 100px; height: 100px; background-image: radial-gradient(circle, black 10px, transparent 11px); background-size: 100% 33.33%; }<div></div>shadow
div { width: 30px; height: 30px; border-radius: 50%; background-color: black; box-shadow: 0px 40px 0px black, 0px 80px 0px black; }<div></div>pseudo elements
div { position: relative; width: 20px; height: 20px; background-color: black; border-radius: 50%; } div:before, div:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0px; background-color: inherit; border-radius: inherit; } div:before { top: 40px; } div:after { top: 80px; }<div></div>Try this complete source code for 3 dot menu:
index.html
<!DOCTYPE html> <html> <head> <title>Three Dot Menu</title> <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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
