HTML ve CSS kullanarak yapılmış, yatay menü, dikey menü ve açılır menü örnekleri. CSS Menü Örnekleri ekran görüntüleri, HTML Kodları ve CSS Kodlarını alarak düzenleyebilir ve Web Sitenizde kullanabilirsiniz.
CSS Menü Örnekleri konusu altına yeni örnekler eklenecektir.
Bu sayfada bulunan CSS Menü örneklerinden bazıları Duyarlı (Responsive) olarak ayarlanmıştır. Mobil uyumludur.
CSS Menü Örnekleri 1:
Masaüstü Görünüm:
Mobil Görünüm:
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'><span>ANASAYFA</span></a></li> <li><a href='#'><span>WEB TASARIM</span></a></li> <li><a href='#'><span>PROGRAMLAMA</span></a></li> <li class='last'><a href='#'><span>VERİTABANI</span></a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); #cssmenu { background:#66D2ED; width: auto; } #cssmenu ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; zoom: 1; } #cssmenu ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { display: inline-block; padding: 0; margin: 0; } #cssmenu.align-right ul li { float: right; } #cssmenu.align-center ul { text-align: center; } #cssmenu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #cssmenu ul li a:hover { color: #333333; } #cssmenu ul li a:hover:before { width: 100%; } #cssmenu ul li a:after { content: ""; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #cssmenu ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #333333; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after { display: none; } #cssmenu ul li.active a { color: #333333; } #cssmenu ul li.active a:before { width: 100%; } #cssmenu.align-right li.last > a:after, #cssmenu.align-right li:last-child > a:after { display: block; } #cssmenu.align-right li:first-child a:after { display: none; } @media screen and (max-width: 768px) { #cssmenu ul li { float: none; display: block; } #cssmenu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fb998c; } #cssmenu ul li.last > a, #cssmenu ul li:last-child > a { border: 0; } #cssmenu ul li a:after { display: none; } #cssmenu ul li a:before { display: none; } } |
CSS Menü Örnekleri 2
Masaüstü Görünüm:
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>www.tasarimkodlama.com</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'>ANASAYFA</a></li> <li><a href='#'>WEB TASARIM</a></li> <li><a href='#'>PROGRAMLAMA</a></li> <li><a href='#'>VERİTABANI</a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
@import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu { width: auto; border-bottom: 3px solid #F66127; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu ul { background: #ffffff; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > a { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > a { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; -webkit-transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotateX(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background:#F66127; } |
CSS Menü Örnekleri 3
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>tasarimkodlama.comr</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'>Anasayfa</a></li> <li><a href='#'>Web Tasarım</a></li> <li><a href='#'>Programlama</a></li> <li><a href='#'>Veritabanı</a></li> <li><a href='#'>İletişim</a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 180px; z-index: 10; } #cssmenu ul { border: 1px solid #cccccc; border-radius: 5px; background: #ffffff; background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff); background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff); background: -o-linear-gradient(bottom, #f0f0f0, #ffffff); background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff); background: linear-gradient(to top, #f0f0f0, #ffffff); } #cssmenu ul li { display: block; border-bottom: 1px solid #cccccc; } #cssmenu ul li.active { border-bottom: 0; } #cssmenu ul li:last-child { border-bottom: 0; } #cssmenu ul li a { display: block; padding: 14px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; color: #444444; } #cssmenu ul li.active { left: -8px; width: 194px; padding: 2px; background: #ce4c4a; background: -moz-linear-gradient(bottom, #c43735, #d56462); background: -webkit-linear-gradient(bottom, #c43735, #d56462); background: -o-linear-gradient(bottom, #c43735, #d56462); background: -ms-linear-gradient(bottom, #c43735, #d56462); background: linear-gradient(to top, #c43735, #d56462); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } #cssmenu ul li.active > a { padding: 12px 12px 12px 16px; border-left: 1px dashed #de8886; border-top: 1px dashed #de8886; border-bottom: 1px dashed #de8886; color: #ffffff; text-shadow: 0 1px 1px #8c2726; } #cssmenu ul li.active:after { position: absolute; right: -16px; top: 7px; width: 31.526911934581186px; height: 31.526911934581186px; background: #ce4c4a; background: -moz-linear-gradient(-45deg, #c43735, #d56462); background: -webkit-linear-gradient(-45deg, #c43735, #d56462); background: -o-linear-gradient(-45deg, #c43735, #d56462); background: -ms-linear-gradient(-45deg, #c43735, #d56462); background: linear-gradient(-45deg, #c43735, #d56462); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); content: ""; } #cssmenu ul li.active:before { position: absolute; right: -12px; top: 9px; z-index: 10; width: 28.526911934581186px; height: 28.526911934581186px; border-right: 1px dashed #e9afae; border-top: 1px dashed #e9afae; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); content: ""; } #cssmenu ul li.active a:after { position: absolute; bottom: -7px; left: -11px; z-index: -1; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid transparent; border-right: 8px solid #982b29; content: ""; } |
CSS Menü Örnekleri 4
Masaüstü Görünüm:
Html Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>tasarimkodlama.com</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'><span>Anasayfa</span></a></li> <li class='active has-sub'><a href='#'><span>Web Tasarım</span></a> <ul> <li class='has-sub'><a href='#'><span>HTML</span></a> <ul> <li><a href='#'><span>HTML Dersler</span></a></li> <li class='last'><a href='#'><span>HTML Örnekler</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>CSS</span></a> <ul> <li><a href='#'><span>CSS Dersler</span></a></li> <li class='last'><a href='#'><span>CSS Örnekler</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>Programlama</span></a></li> <li class='last'><a href='#'><span>Veritabanı</span></a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { border: none; line-height: 1; margin: 0; padding: 0; } #cssmenu { height: 37px; display: block; border: 1px solid; border-radius: 5px; width: auto; border-color: #080808; margin: 0; padding: 0; } #cssmenu > ul { list-style: inside none; margin: 0; padding: 0; } #cssmenu > ul > li { list-style: inside none; float: left; display: inline-block; position: relative; margin: 0; padding: 0; } #cssmenu.align-center > ul { text-align: center; } #cssmenu.align-center > ul > li { float: none; margin-left: -3px; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-center > ul > li:first-child > a { border-radius: 0; } #cssmenu > ul > li > a { outline: none; display: block; position: relative; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); font-weight: 700; font-size: 13px; font-family: Arial, Helvetica, sans-serif; border-right: 1px solid #080808; color: #ffffff; padding: 12px 20px; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 5px; } #cssmenu > ul > li > a:after { content: ""; position: absolute; border-right: 1px solid; top: -1px; bottom: -1px; right: -2px; z-index: 99; border-color: #3c3c3c; } #cssmenu ul li.has-sub:hover > a:after { top: 0; bottom: 0; } #cssmenu > ul > li.has-sub > a:before { content: ""; position: absolute; top: 18px; right: 6px; border: 5px solid transparent; border-top: 5px solid #ffffff; } #cssmenu > ul > li.has-sub:hover > a:before { top: 19px; } #cssmenu > ul > li.has-sub:hover > a { padding-bottom: 14px; z-index: 999; border-color: #3f3f3f; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div { display: block; } #cssmenu > ul > li.has-sub > a:hover, #cssmenu > ul > li.has-sub:hover > a { background: #3f3f3f; border-color: #3f3f3f; } #cssmenu ul li > ul, #cssmenu ul li > div { display: none; width: auto; position: absolute; top: 38px; background: #3f3f3f; border-radius: 0 0 5px 5px; z-index: 999; padding: 10px 0; } #cssmenu ul li > ul { width: 200px; } #cssmenu ul ul ul { position: absolute; } #cssmenu ul ul li:hover > ul { left: 100%; top: -10px; border-radius: 5px; } #cssmenu ul li > ul li { display: block; list-style: inside none; position: relative; margin: 0; padding: 0; } #cssmenu ul li > ul li a { outline: none; display: block; position: relative; font: 10pt Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); margin: 0; padding: 8px 20px; } #cssmenu, #cssmenu ul ul > li:hover > a, #cssmenu ul ul li a:hover { background: #3c3c3c; background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222)); background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%); background: linear-gradient(top, #3c3c3c 0%, #222222 100%); } #cssmenu > ul > li > a:hover { background: #080808; color: #ffffff; } #cssmenu ul ul a:hover { color: #ffffff; } #cssmenu > ul > li.has-sub > a:hover:before { border-top: 5px solid #ffffff; } |
CSS Menü Örnekleri 5
Masaüstü Görünüm:
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>tasarimkodlama.com</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'><span>Anasayfa</span></a></li> <li><a href='#'><span>Web Tasarım</span></a></li> <li><a href='#'><span>Programlama</span></a></li> <li class='last'><a href='#'><span>Veritabanı</span></a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); @charset "UTF-8"; /* Base Styles */ #cssmenu ul, #cssmenu li, #cssmenu a { list-style: none; margin: 0; padding: 0; border: 0; line-height: 1; font-family: 'Lato', sans-serif; } #cssmenu { border: 1px solid #133e40; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; width: auto; } #cssmenu ul { zoom: 1; background: #36b0b6; background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f)); background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%); background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%); background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%); background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #cssmenu ul:before { content: ''; display: block; } #cssmenu ul:after { content: ''; display: table; clear: both; } #cssmenu li { float: left; margin: 0 5px 0 0; border: 1px solid transparent; } #cssmenu li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 8px 15px 9px 15px; display: block; text-decoration: none; color: #ffffff; border: 1px solid transparent; font-size: 16px; } #cssmenu li.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #36b0b6; } #cssmenu li.active a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: block; background: #1e6468; border: 1px solid #133e40; -moz-box-shadow: inset 0 5px 10px #133e40; -webkit-box-shadow: inset 0 5px 10px #133e40; box-shadow: inset 0 5px 10px #133e40; } #cssmenu li:hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #36b0b6; } #cssmenu li:hover a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: block; background: #1e6468; border: 1px solid #133e40; -moz-box-shadow: inset 0 5px 10px #133e40; -webkit-box-shadow: inset 0 5px 10px #133e40; box-shadow: inset 0 5px 10px #133e40; } |
CSS Menü Örnekleri 6
Masaüstü Görünüm
HTML Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>tasarimkodlama.com</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'><span>Anasayfa</span></a></li> <li class='active has-sub'><a href='#'><span>Web Tasarım</span></a> <ul> <li class='has-sub'><a href='#'><span>HTML</span></a> <ul> <li><a href='#'><span>HTML Dersler</span></a></li> <li class='last'><a href='#'><span>HTML Örnekler</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>CSS</span></a> <ul> <li><a href='#'><span>CSS Dersler</span></a></li> <li class='last'><a href='#'><span>CSS Örnekler</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>Programlama</span></a></li> <li class='last'><a href='#'><span>Veritabanı</span></a></li> </ul> </div> </body> <html> |
CSS Kodları (styles.css):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
@charset "UTF-8"; /* Some stylesheet reset */ #cssmenu > ul { list-style: none; margin: 0; padding: 0; vertical-align: baseline; line-height: 1; } /* The container */ #cssmenu > ul { display: block; position: relative; width: 150px; } #cssmenu > ul li { display: block; position: relative; margin: 0; padding: 0; width: 100%; } /* General link styling */ #cssmenu > ul li a { /* Layout */ display: block; position: relative; margin: 0; border-top: 1px dotted #3a3a3a; border-bottom: 1px dotted #1b1b1b; padding: 11px 20px; /* Typography */ font-family: Helvetica, Arial, sans-serif; color: #d8d8d8; text-decoration: none; text-transform: uppercase; text-shadow: 0 1px 1px #000; font-size: 13px; font-weight: 300; /* Background & effects */ background: #282828; } /* Rounded corners for the first link of the menu/submenus */ #cssmenu > ul li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; border-top: 0; } /* Rounded corners for the last link of the menu/submenus */ #cssmenu > ul li:last-child > a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 0; } /* The hover state of the menu/submenu links */ #cssmenu > ul li > a:hover, #cssmenu > ul li:hover > a { color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); background: #54cdf1; background: -webkit-linear-gradient(#e28c8c, #f27979); background: -moz-linear-gradient(#e28c8c, #f27979); background: linear-gradient(#e28c8c, #f27979); border-color: transparent; } /* The arrow indicating a submenu */ #cssmenu > ul .has-sub > a::after { content: ""; position: absolute; top: 16px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #d8d8d8; } /* The same arrow, but with a darker color, to create the shadow effect */ #cssmenu > ul .has-sub > a::before { content: ""; position: absolute; top: 17px; right: 10px; width: 0px; height: 0px; /* Creating the arrow using borders */ border: 4px solid transparent; border-left: 4px solid #000; } /* Changing the color of the arrow on hover */ #cssmenu > ul li > a:hover::after, #cssmenu > ul li:hover > a::after { border-left: 4px solid #ffffff; } #cssmenu > ul li > a:hover::before, #cssmenu > ul li:hover > a::before { border-left: 4px solid rgba(0, 0, 0, 0.3); } /* THE SUBMENUS */ #cssmenu > ul ul { position: absolute; left: 100%; top: -9999px; padding-left: 5px; opacity: 0; width: 140px; /* The fade effect, created using an opacity transition */ -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } /* Showing the submenu when the user is hovering the parent link */ #cssmenu > ul li:hover > ul { top: 0px; opacity: 1; } |
Add comment