Milad123 285 ارسال شده در دی 94 گزارش بازنشر ارسال شده در دی 94 (ویرایش شده) سلام عنوان بهتری به ذهنم نرسید یه منوی عمودی داریم که شامل چند زیرمجموعه میشه این کد استایلشه : #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: 255px; z-index: 10; float: left; text-align: left; padding-left: 10px; } #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: 13px; font-weight: bold; text-decoration: none; color: #444444; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } #cssmenu ul li a:hover { display: block; padding: 14px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: bold; text-decoration: none; color: #ecf0f1; background-color: #ce4c4a; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } #cssmenu ul li.active { left: -8px; width: 260px; 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: ""; } اینم یه نمونه HTML : <div id='cssmenu'> <ul> <li class='active'><a href="#">Menu</a></li> <!------------------------------A-------------------------------------> <li class='active'><a href="#">A</a></li> <li><a href="#">A1</a></li> <li><a href="#">A2</a></li> <li><a href="#">A3</a></li> <!-------------------------------------------------------------------> <li class='active'><a href="#">B</a></li> <li><a href="#">B1</a></li> <li><a href="#">B2</a></li> <li><a href="#">B3</a></li> <!-------------------------------------------------------------------> <li class='active'><a href="#">C</a></li> <li><a href="#">C1</a></li> <li><a href="#">C2</a></li> <li><a href="#">C3</a></li> <!-------------------------------------------------------------------> </ul> </div> الان بطور پیشفرض تمام قسمت های منو نمایش داده میشه! من میخوام کاری کنم که وقتی موس میره روی A اطلاعات زیر A یعنی A1 و A2 و A3 نمایش داده بشه و همینطور در مورد B و C و الی آخر... یعنی تا وقتی موس رو روی هر حرف نبردیم، زیرمجموعه های اون قسمت نمایان نشه! یا با بردن موس روش زیرمجموعه هاشو بیاره زیرش و با رفتن موس دوباره بسته بشه، یا با یکبار کلیک این اتفاق بیفته... امیدوارم تونسته باشم منظورمو برسونم. ممنون میشم راهنمایی کنید. ویرایش شده دی 94 توسط Milad123 نقل قول لینک به ارسال
Milad123 285 ارسال شده در دی 94 مالک گزارش بازنشر ارسال شده در دی 94 مرسی از این همه پاسخ پیش به سوی وردپرس فارسی، نه؟؟ نقل قول لینک به ارسال
rezakianoosh 1795 ارسال شده در دی 94 گزارش بازنشر ارسال شده در دی 94 سلام اموزش زیر رو مطالعه کنید آموزش ساخت منو کشویی html و css نقل قول لینک به ارسال
M.Javad 684 ارسال شده در دی 94 گزارش بازنشر ارسال شده در دی 94 #cssmenu ul ul{display:none} #cssmenu ul>li:hover ul{display:block;} نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .