SiPengembara Gila

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

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.

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/