0 / 4
Xoş gəlmişsiniz | Daxil ol | Qeydiyyat

Last activity

Forum | Proqramlaşdırma | CSS
Search | Topic files (1)
  CSS Açılır Menü Örneği
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:23)
May.az
Bu yazımızda HTML ve CSS kullanarak basit bir yatay açılır menü tasarımı yapacağız. HTML ve CSS dosyalarımızı oluşturduğumuzda aşağıdaki gibi bir görüntü elde edeceğiz.
Attachment:
Click to view image
(60.99 кб.)
Downloads: 57 Time
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:25)
May.az
index.html dosyamızın içeriğini incelediğimizde iç içe liste oluşturulduğunu görüyoruz. Oluşturulan bu listenin CSS ile açılır menü haline gelmesini sağlayacağız.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>www.yazilimkodlama.com</title>
  6. <link rel="stylesheet" href="tasarim.css">
  7. </head>
  8.  
  9. <body>
  10. <nav class="menu">
  11. <ul>
  12. <li><a href="#">Ana Sayfa</a></li>
  13. <li><a href="#">Csharp</a>
  14. <ul>
  15. <li><a href="#">Console</a></li>
  16. <li><a href="#">Windows</a></li>
  17. <li><a href="#">WPF</a></li>
  18. </ul>
  19. </li>
  20. <li><a href="#">Web Tasarım</a>
  21. <ul>
  22. <li><a href="#">HTML</a></li>
  23. <li><a href="#">CSS</a></li>
  24. <li><a href="#">ASP.NET</a></li>
  25. </ul>
  26. </li>
  27. <li><a href="#">BTT</a>
  28. <ul>
  29. <li><a href="#">Anakart</a></li>
  30. <li><a href="#">İşlemci</a></li>
  31. <li><a href="#">Bellekler</a></li>
  32. </ul>
  33. </li>
  34. <li><a href="#">İletişim</a></li>
  35. </ul>
  36. </nav>
  37. </body>
  38.  
  39. </html>
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:25)
May.az
tasarim.css dosyamızın içeriği:
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:26)
May.az
  1. .menu ul{
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. .menu li{
  8. float: left;
  9. position: relative;
  10. width: 120px;
  11. }
  12.  
  13. .menu ul li ul{
  14. display: none;
  15. }
  16.  
  17. .menu ul li:hover ul{
  18. display: block;
  19. }
  20.  
  21. .menu ul li a{
  22. text-decoration: none;
  23. background: #333;
  24. display: block;
  25. color: white;
  26. font-weight: bold;
  27. font-family: sans-serif;
  28. text-align: center;
  29. border-bottom: 2px solid red;
  30. border-left: 1px solid #595959;
  31. padding: 5px;
  32. }
  33.  
  34. .menu ul li ul li a{
  35. background: #595959;
  36. text-align: left;
  37. padding: 5px;
  38. border-bottom: 1px solid #333;
  39. font-size: .8em;
  40. }
  41.  
  42. .menu li a:hover{
  43. background: rgb(248,140,0);
  44. transition: .5s;
  45. }
  46.  
  47. .menu ul li ul li a:hover{
  48. padding-left: 15px;
  49.  
  50. }
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:27)
May.az
Yukarıdaki CSS kodlarını incelediğimizde menünün üzerine geldiğimizde display özelliğinin none ve block yapılarak açıldığını görmekteyiz.
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:27)
May.az
  1. .menu ul li ul{
  2. display: none;
  3. }
  4.  
  5. .menu ul li:hover ul{
  6. display: block;
  7. }

Edited AGENT (26.07.2019 / 22:28) [1]
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:28)
May.az
2. bir yöntem olarak aşağıdaki şekild ede kodlarımızı oluşturabiliriz.
AGENT AGENT (SV!) [Off] [#] (26.07.2019 / 22:29)
May.az
  1. .menu ul li ul{
  2. position:absolute;
  3. left:-9000em;
  4. }
  5.  
  6. .menu ul li:hover ul{
  7. left:0;
  8. }
  Total: 8

Filter by author
Download Topic

In forum

New at the top
© 2018 mywap.az inwap.az MobTop.az