Я хочу иметь 3 точки на моей странице, чтобы, например, переключить отображение контекстного меню. Как я могу достичь этого с помощью CSS?
Как сделать 3 вертикальных точки с помощью CSS?
Ответ 1
с использованием юникода char
.test:after {
content: '\2807';
font-size: 100px;
}
<div class="test"></div>
Ответ 2
Попробуйте этот полный исходный код для трехточечного меню:
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>
Ответ 3
Если вы используете font-awesome, это так же просто, как включить .fa-ellipsis-v
. Дополнительная документация находится здесь: http://fontawesome.io/icon/ellipsis-v/.
Ответ 4
-
С fontawesome.css
<i class='fa fa-ellipsis-v'></i>
-
С глификонами
<span class="glyphicons glyphicons-option-vertical"></span>
-
С CSS
.textSpan:after { content: '\2807'; font-size: 3em; color: #2e2e2e }
Ответ 5
HTML
<div class="dot"></div>
CSS
.dot{
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Ответ 6
Вам не нужен css (если вы специально не структурируете свой HTML-код по-разному), html ul работает так, как из коробки
Например:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ответ 7
Юникод включает & # 10247; который является символом Брайля для буквы "U". Чтобы использовать, просто используйте HTML-сущность ⠇
в вашем коде.
Ответ 8
<script> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'; return false;"></link></script>
<i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>
Это можно использовать, чтобы увидеть три точки. Это можно использовать в картах в реакции