Showing posts with label HTML. Show all posts
Membuat Dropdown Menu Website
Kali ini kita akan membahas cara membuat dropdown pada menu website
pertama buat file style.css
lalu isikan script berikut pada file style.css
nav ul {
padding: 0 0px;
list-style: none;
position: relative;
width: 100%;
font-family: 'helvetica', arial;
}
nav ul:after{
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #222;
}
nav ul li a {
display: block;
padding: 20px 30px;
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #fff;
}
nav ul ul {
display: none;
background: #111;
padding: 0;
position: absolute;
top: 100%;
max-width: 300px;
width: auto;
}
nav ul ul li {
float: none;
border-bottom: 1px solid rgba(0,0,0,.2);
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #222;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
width: 200px;
}
Jika anda sudah selesai buat file baru berextensi php ataupun html
lalu buat kira kira semacam ini
<link rel="stylesheet" href="style.css" />
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Profil 1</a></li>
<li><a href="#">Profil 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Kategori</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">HTML</a> <ul>
<li><a href="#">Dasar HTML</a></li>
<li><a href="#">Tag HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kontak</a>
</nav>
jika sudah silakan anda mencoba membuka dengan localhost ataupun web kesayangan anda
bagi anda yang tidak mau membuat file style.css
bisa dengan cara seperti ini
<style type="text/css">
nav ul {
padding: 0 0px;
list-style: none;
position: relative;
width: 100%;
font-family: 'helvetica', arial;
}
nav ul:after{
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #222;
}
nav ul li a {
display: block;
padding: 20px 30px;
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #fff;
}
nav ul ul {
display: none;
background: #111;
padding: 0;
position: absolute;
top: 100%;
max-width: 300px;
width: auto;
}
nav ul ul li {
float: none;
border-bottom: 1px solid rgba(0,0,0,.2);
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #222;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
width: 200px;
}
</style>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Profil 1</a></li>
<li><a href="#">Profil 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Kategori</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">HTML</a> <ul>
<li><a href="#">Dasar HTML</a></li>
<li><a href="#">Tag HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kontak</a>
</nav>
lalu save dan kemudian anda coba panggil di localhost ataupun web kesayangan anda
Sebagai gambaran hasil silakan lihat screenshot berikut
jika anda ingin membuat dropdown yang berbeda anda bisa mengkreasikannya dengan mengedit css :D
sekian saja dari saya terimakasih
jika ada yang ingin ditanyakan silahkan berkomentar
pertama buat file style.css
lalu isikan script berikut pada file style.css
nav ul {
padding: 0 0px;
list-style: none;
position: relative;
width: 100%;
font-family: 'helvetica', arial;
}
nav ul:after{
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #222;
}
nav ul li a {
display: block;
padding: 20px 30px;
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #fff;
}
nav ul ul {
display: none;
background: #111;
padding: 0;
position: absolute;
top: 100%;
max-width: 300px;
width: auto;
}
nav ul ul li {
float: none;
border-bottom: 1px solid rgba(0,0,0,.2);
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #222;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
width: 200px;
}
Jika anda sudah selesai buat file baru berextensi php ataupun html
lalu buat kira kira semacam ini
<link rel="stylesheet" href="style.css" />
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Profil 1</a></li>
<li><a href="#">Profil 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Kategori</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">HTML</a> <ul>
<li><a href="#">Dasar HTML</a></li>
<li><a href="#">Tag HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kontak</a>
</nav>
jika sudah silakan anda mencoba membuka dengan localhost ataupun web kesayangan anda
bagi anda yang tidak mau membuat file style.css
bisa dengan cara seperti ini
<style type="text/css">
nav ul {
padding: 0 0px;
list-style: none;
position: relative;
width: 100%;
font-family: 'helvetica', arial;
}
nav ul:after{
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #222;
}
nav ul li a {
display: block;
padding: 20px 30px;
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #fff;
}
nav ul ul {
display: none;
background: #111;
padding: 0;
position: absolute;
top: 100%;
max-width: 300px;
width: auto;
}
nav ul ul li {
float: none;
border-bottom: 1px solid rgba(0,0,0,.2);
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #222;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
width: 200px;
}
</style>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Profil 1</a></li>
<li><a href="#">Profil 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Kategori</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">HTML</a> <ul>
<li><a href="#">Dasar HTML</a></li>
<li><a href="#">Tag HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kontak</a>
</nav>
lalu save dan kemudian anda coba panggil di localhost ataupun web kesayangan anda
Sebagai gambaran hasil silakan lihat screenshot berikut
sekian saja dari saya terimakasih
jika ada yang ingin ditanyakan silahkan berkomentar
50 Template Login Page Gratis Terbaik untuk Website anda
Halaman Login terdapat pada website dinamis.
Halaman ini adalah 'pintu' menuju halaman administrator, atau halaman
user jika website-nya merupakan website yang mengharuskan penggunanya
mempunyai akun.
Keberadaan halaman login cukup vital mengingat kegunaan dan interaktivitasnya dengan pengguna. Tidak seperti elemen-elemen website lain, form login ini ada bukan untuk dibaca, tetapi untuk digunakan secara langsung dengan mengisi isiannya. Isian form login biasanya terdiri dari email atau username dan password.
Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.
Nah, di bawah ini saya kumpulkan 50 template halaman login gratis yang siap pakai. Silahkan anda pilih dan download yang anda sukai. Anda bebas menggunakannya pada project anda. Klik gambarnya untuk detail dan download.
Itulah 50 template login page yang bisa anda download secara gratis. Semoga bermanfaat.
Sumber :
http://www.syakirurohman.net
http://designscrazed.org/css-html-login-form-templates/
http://www.designsave.net/2014/08/responsive-html5-login-forms-free.html
http://www.multyshades.com/2014/04/login-form-templates/
http://designsparkle.com/login-form-templates/
Keberadaan halaman login cukup vital mengingat kegunaan dan interaktivitasnya dengan pengguna. Tidak seperti elemen-elemen website lain, form login ini ada bukan untuk dibaca, tetapi untuk digunakan secara langsung dengan mengisi isiannya. Isian form login biasanya terdiri dari email atau username dan password.
Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.
Nah, di bawah ini saya kumpulkan 50 template halaman login gratis yang siap pakai. Silahkan anda pilih dan download yang anda sukai. Anda bebas menggunakannya pada project anda. Klik gambarnya untuk detail dan download.
1. Login and Registration Form with HTML5 and CSS3
2. Animated Login Form
3. Login Form HTML5 and CSS3
4. Slick Login Form with CSS3
5. Stylish animated login & Sign Up Form
6. Login form - HTML5/CSS3/JQuery
7. Login Form with PHP, Jquery and CSS3
8. Login Form
9. Modern Login Form
10. Apple-Like Login Form
11. Login Form (Coded)
12. Free HTML5 CSS3 Login Form
13. Slick Login Form with HTML5 & CSS3
14. Facebook Login Form
15. HTML & CSS Login Form
16. Rounded Flat Login Form
17. CSS3 Login Form
18. Custom Login Form
19. Login + Register Form
20. Login Form HTML5 and CSS3
21. Simple Dropdown Login Box
22. Dark Login Form
23. Minimal Flat CSS Login Form
24. Simply Login Form
25. Transparent Login Form
26. Unique Style Form Login
27. Classic HTML Login Form
28. Signin Form
29. New CSS3 Login Form
30. JS Login Form
31. Minimal Form Template for Login
32. Signup/Login Form
33. Dropdown Login Form
34. Custom Login Form Styling
35. Login & Register Form
36. Login Form
37. Disqus Like Sign-in Form
38. Nice and Simple Login Form
39. Flat UI Login Form
40. Pure CSS Login Form
41. Login Form Template with HTML & CSS
42. Login - Animation
43. CSS Login Form
44. Bootstrap Login Form Layered Free
45. Bootstrap Login Form with CSS 3D Transforms
46. Bootstrap Parallax Login Form
47. Responsive Login Form Template Free
48. Bootstrap Login With Social Button
49. Free Flat Login Form
50. Free Modal Login Form
Itulah 50 template login page yang bisa anda download secara gratis. Semoga bermanfaat.
Sumber :
http://www.syakirurohman.net
http://designscrazed.org/css-html-login-form-templates/
http://www.designsave.net/2014/08/responsive-html5-login-forms-free.html
http://www.multyshades.com/2014/04/login-form-templates/
http://designsparkle.com/login-form-templates/
Subscribe to:
Posts (Atom)