• Đăng ký
  • Đăng nhập

Tạo trình đơn thả xuống với hiệu ứng trượt, chỉ css và không sử dụng javascript

📅 — 👀 287 — 👦

Trang này có hữu ích không?

👍 Có (14)        👎 Không (9)


Đây là một menu được tạo bởi css với các slide đẹp mà không cần sử dụng javascript. Điều này giúp trang web tải nhanh hơn.

Result

[html]<input class="dropdown-open" hidden="hidden" id="dropdown-1" type="checkbox" />
<label class="menu-toggle mobile-visible" for="dropdown-1" /></label>
<label class="dropdown-overlay" for="dropdown-1"></label>
<header class="header">
<div class="my-photo" style="text-align: center;">
<img src="https://lh3.googleusercontent.com/-OkFNVpyoeRQ/V3eqIoYB-BI/AAAAAAAABeo/6iYWXx1ai6IM0HG3y1MvbSxc-s336iEOACEwYBhgL/w140-h140-p/icon128.png">
</div>
<div class="site-title-block">
<h1 class="site-title">
ThichCode.NET
</h1>
<p class="site-description">
Solution Code For You</p>
</div>
<div class="site-nav">
<ul class="site-main-menu" id="nav">
<li class="active">
<a href="https://thichcode.net/">
<i class="fa icon0"></i> Home
</a>
</li>
<li>
<a href="https://thichcode.net/p/about-me.html">
<i class="fa icon1"></i> About Me
</a>
</li>
<li>
<a href="https://thichcode.net/p/my-works.html">
<i class="fa icon2"></i> My Works
</a>
</li>
<li>
<a href="https://thichcode.net/p/my-project.html">
<i class="fa icon3"></i> My Project
</a>
</li>
<li>
<a href="https://thichcode.net/search/label">
<i class="fa icon4"></i> My Blog
</a>
</li>
<li>
<a href="https://thichcode.net/p/contact.html">
<i class="fa icon5"></i> Contact
</a>
</li>
</ul>
</div>
</header>[/html][css]<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
label.menu-toggle:before {
content: '\f0c9';
font-family: FontAwesome;
color: #222;
font-size: 21px;
line-height: 50px;
}

label.menu-toggle {
display: block;
position: fixed;
top: 0;
right: 10px;
z-index: 999;
cursor: pointer;
}

.dropdown-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

.dropdown-hover:hover .header,
.dropdown-open:checked~.header {
left: 0;
}

.dropdown-hover:hover .dropdown-overlay,
.dropdown-open:checked~.dropdown-overlay {
display: block;
}

.dropdown-hover:hover .menu-toggle,
.dropdown-open:checked~.menu-toggle:before {
content: '\f00d';
}

.header {
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: 320px;
z-index: 999;
-webkit-box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
left: -320px;
}

.site-main-menu {
display: block;
padding: 0;
margin: 0;
}

.site-title-block {
position: relative;
z-index: 1;
margin: 20px 20px 10px;
text-align: center;
}

.site-nav {
display: block;
padding: 25px 0 30px;
}

.site-main-menu li {
display: block;
position: relative;
padding: 0;
text-align: center;
}
</style>[/css]

Trả lời


📁 Code Demo
🔖 ,