Milad123

باز شدن گزینه های منو با رفتن موس روی آن

4 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام

عنوان بهتری به ذهنم نرسید :D

یه منوی عمودی داریم که شامل چند زیرمجموعه میشه

این کد استایلشه :

#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 و الی آخر...

یعنی تا وقتی موس رو روی هر حرف نبردیم، زیرمجموعه های اون قسمت نمایان نشه!

یا با بردن موس روش زیرمجموعه هاشو بیاره زیرش و با رفتن موس دوباره بسته بشه، یا با یکبار کلیک این اتفاق بیفته...

امیدوارم تونسته باشم منظورمو برسونم.

ممنون میشم راهنمایی کنید.

ویرایش شده در توسط Milad123
0

به اشتراک گذاری این پست


لینک به پست

مرسی از این همه پاسخ

پیش به سوی وردپرس فارسی، نه؟؟ :D

0

به اشتراک گذاری این پست


لینک به پست

سلام

اموزش زیر رو مطالعه کنید

آموزش ساخت منو کشویی html و css

0

به اشتراک گذاری این پست


لینک به پست
#cssmenu ul ul{display:none}
#cssmenu ul>li:hover ul{display:block;}

 

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری