Zubi Cloud hướng dẫn Code HTML tạo menu click xổ xuống, How TO – Clickable Dropdown
Chèn đoạn code sau vào nơi cần hiển thị
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>
Chèn đoạn JS sau trên </head>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
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>
Chèn đoạn CSS sau vào Style
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd;}
.show {display: block;}
1 sản phẩm của Zubi Group
[url=http://tadalafilstd.com/]tadalafil online in india[/url]
[url=http://isynthroid.online/]synthroid tab 88mcg[/url]
qiyezp.com
Zhu Houzhao와 Fang Jifan은 Zhu Houzhao에서 멀리 떨어져 서있었습니다.
[url=http://ezithromycin.online/]zithromax online prescription[/url]
Whoa! This blog looks just like my old one! It’s on a totally different subject but it has pretty much the same page layout and design. Superb choice of colors!
Here is my webpage; dune sofa
ilogidis.com
옛 황실 의사가 걱정스러운 표정을 짓는 이유이기도 하다.
[url=http://drugstorepp.online/]super pharmacy[/url]
donmhomes.com
このブログのファンになりました。更新を楽しみにしています！
[url=http://bestmedsx.online/]canadian pharmacy coupon code[/url]
[url=https://tadalafilgf.com/]cialis for daily use 5 mg cost[/url]
[url=https://happyfamilymedicalstore.online/]recommended canadian pharmacies[/url]
[url=https://olisinopril.online/]lisinopril 25[/url]
[url=http://metformin.store/]metformin 104[/url]
Does your site have a contact page? I’m having a tough time locating it but, I’d
like to send you an e-mail. I’ve got some recommendations for your blog you might
be interested in hearing. Either way, great blog and I look forward to
seeing it expand over time.
Here is my web site thebrotherswild
[url=https://synthroidsl.online/]synthroid tab 137 mcg[/url]
sandyterrace.com
Liu Jian은 웃거나 울지 못했습니다. “전하 … 무슨 일이 일어났습니다!”
[url=https://pharmgf.online/]online pharmacy price checker[/url]
Як вибрати ідеальний варіант
Кращі тактичні рюкзаки
тактичний військовий рюкзак [url=https://ryukzakivijskovibpjgl.kiev.ua/]https://ryukzakivijskovibpjgl.kiev.ua/[/url] .
[url=http://ismetformin.online/]metformin 120 pills cost[/url]
[url=http://valtrexid.com/]where to buy valtrex online[/url]
Які елементи входять до складу
Модна тенденція
тактичні рюкзаки купити [url=https://ryukzakivijskovibpjgl.kiev.ua/]тактичні рюкзаки купити[/url] .
qiyezp.com
갑자기 Zhang Heling의 표정이 더욱 추악 해졌고 온통 소름 끼치는 느낌이 들었습니다.
What’s up to all, how is all, I think every one is getting
more from this site, and your views are nice for new visitors.
Stop by my web blog 피망머니상
Як підібрати тактичний рюкзак для активного відпочинку
Екстремальні подорожі
купити рюкзак тактичний [url=https://ryukzakivijskovibpjgl.kiev.ua/]купити рюкзак тактичний[/url] .
Very soon this web page will be famous among all
blogging and site-building people, due to it’s good articles or reviews
Feel free to surf to my blog post The Brothers Wild
Як підібрати тактичний рюкзак для активного відпочинку
Екстремальні подорожі
рюкзаки тактичні купити [url=https://ryukzakivijskovibpjgl.kiev.ua/]https://ryukzakivijskovibpjgl.kiev.ua/[/url] .
Pretty nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed browsing your blog posts.
In any case I will be subscribing to your rss feed and
I hope you write again soon!
Feel free to surf to my web-site dune sofa for sale
sandyterrace.com
세상의 평범한 사람들은 우리를 어떻게 이렇게 대합니까?
Excellent goods from you, man. I’ve understand your stuff previous to and
you’re just extremely magnificent. I actually like what you have acquired
here, certainly like what you are stating and The Brothers Wild way in which you say it.
You make it entertaining and you still take care of to
keep it smart. I can not wait to read far more from you.
This is really a great website.
It’s very easy to find out any topic on net as compared to textbooks,
as I found this post at this site.
Also visit my blog post; dune sofa for sale
[url=https://bestmedsx.com/]best online pet pharmacy[/url]
largestcatbreed.com
Zhang Sheng이 떠난 후 Hongzhi 황제는 Xiao Jing에게 “Fang Jifan에게 전화하여 청중을 모으십시오. “라고 말했습니다.
[url=https://bmtadalafil.online/]tadalafil soft tabs 20mg[/url]
[url=https://bestmedsx.com/]pharmacy wholesalers canada[/url]