اوردن منو در گوشه سمت چپ صفحه در html css
سوال
سلام من مخوام این منو ی html رو از بالای صفحه بیارم پایین صفحه خودم نتونستم هر جا هم که بردم هیچکس نتونست تورو خدا کمکم کنید خیلی کارم پاش گیره.
کد ها به صورت زیر میباشد :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ ۸۵ ۸۶ ۸۷ ۸۸ ۸۹ ۹۰ ۹۱ ۹۲ ۹۳ ۹۴ ۹۵ ۹۶ ۹۷ ۹۸ ۹۹ ۱۰۰ ۱۰۱ ۱۰۲ ۱۰۳ ۱۰۴ ۱۰۵ ۱۰۶ ۱۰۷ ۱۰۸ ۱۰۹ ۱۱۰ ۱۱۱ ۱۱۲ ۱۱۳ ۱۱۴ ۱۱۵ ۱۱۶ ۱۱۷ ۱۱۸ ۱۱۹ ۱۲۰ ۱۲۱ ۱۲۲ ۱۲۳ ۱۲۴ ۱۲۵ ۱۲۶ ۱۲۷ ۱۲۸ ۱۲۹ ۱۳۰ ۱۳۱ ۱۳۲ ۱۳۳ ۱۳۴ ۱۳۵ ۱۳۶ ۱۳۷ ۱۳۸ ۱۳۹ ۱۴۰ ۱۴۱ ۱۴۲ ۱۴۳ ۱۴۴ ۱۴۵ ۱۴۶ ۱۴۷ ۱۴۸ ۱۴۹ ۱۵۰ ۱۵۱ ۱۵۲ ۱۵۳ ۱۵۴ ۱۵۵ ۱۵۶ ۱۵۷ ۱۵۸ ۱۵۹ ۱۶۰ ۱۶۱ ۱۶۲ ۱۶۳ ۱۶۴ ۱۶۵ ۱۶۶ ۱۶۷ ۱۶۸ ۱۶۹ ۱۷۰ ۱۷۱ ۱۷۲ ۱۷۳ ۱۷۴ ۱۷۵ ۱۷۶ ۱۷۷ ۱۷۸ ۱۷۹ ۱۸۰ ۱۸۱ ۱۸۲ ۱۸۳ ۱۸۴ ۱۸۵ ۱۸۶ ۱۸۷ ۱۸۸ ۱۸۹ ۱۹۰ ۱۹۱ ۱۹۲ ۱۹۳ ۱۹۴ ۱۹۵ ۱۹۶ ۱۹۷ ۱۹۸ ۱۹۹ ۲۰۰ ۲۰۱ ۲۰۲ ۲۰۳ ۲۰۴ ۲۰۵ ۲۰۶ ۲۰۷ ۲۰۸ ۲۰۹ ۲۱۰ ۲۱۱ ۲۱۲ ۲۱۳ ۲۱۴ ۲۱۵ ۲۱۶ ۲۱۷ ۲۱۸ ۲۱۹ ۲۲۰ ۲۲۱ ۲۲۲ ۲۲۳ ۲۲۴ ۲۲۵ ۲۲۶ ۲۲۷ ۲۲۸ ۲۲۹ ۲۳۰ ۲۳۱ ۲۳۲ ۲۳۳ ۲۳۴ ۲۳۵ ۲۳۶ ۲۳۷ ۲۳۸ ۲۳۹ ۲۴۰ ۲۴۱ ۲۴۲ ۲۴۳ ۲۴۴ ۲۴۵ ۲۴۶ ۲۴۷ ۲۴۸ ۲۴۹ ۲۵۰ ۲۵۱ ۲۵۲ ۲۵۳ ۲۵۴ ۲۵۵ ۲۵۶ |
<style> .menuHolder {font-family:appfont; width:۱۰۰px; height:۱۰۰px; position:fixed; z-index:۱۰۰; left:۰; top:۰; } .menuHolder ul {padding:۰; margin:۰; list-style:none; position:absolute; left:۰; top:۰; width:۰; height:۰;} .menuHolder ul li {border-radius:۰ ۳۰۰ ۳۰۰px ۰; width:۰; height:۰;} .menuHolder ul li a {color:#۰۰۰; text-decoration:none; font:bold ۱۳px/30px arial, sans-serif; text-align:center; box-shadow:-۵px ۵px ۵px rgba(۰,۰,۰,۰.۴); -webkit-transform-origin:۰ ۰; -moz-transform-origin:۰ ۰; -ms-transform-origin:۰ ۰; -o-transform-origin:۰ ۰; transform-origin:۰ ۰; } .menuHolder ul.p1 li {position:absolute; left:۰; top:۰;} .menuHolder ul.p2 {z-index:-۱;} .menuHolder ul.p3 {z-index:-۱;} .menuHolder li.s1 > a {font-family:appfont; position:absolute; display:block; width:۱۰۰px; height:۱۰۰px; background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); border-radius:۰ ۰ ۱۰۰px ۰;border:solid; border-color:hsla(۰,۰%,۱۰۰%,۱.۰۰); } .menuHolder li.s2 > a {border:solid; border-color:hsla(۰,۰%,۱۰۰%,۱.۰۰);font-family:appfont;position:absolute; display:block; width:۱۰۰px; padding-left:۱۰۰px; height:۲۰۰px; background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); border-radius:۰ ۰ ۲۰۰px ۰;} .menuHolder ul.p3 li a {border:solid; border-color:hsla(۰,۰%,۱۰۰%,۱.۰۰);font-family:appfont;position:absolute; display:block; width:۱۰۰px; padding-left:۲۰۰px; height:۳۰۰px;background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); border-radius:۰ ۰ ۳۰۰px ۰;} .menuHolder ul ul { -webkit-transform-origin:۰ ۰; -moz-transform-origin:۰ ۰; -ms-transform-origin:۰ ۰; -o-transform-origin:۰ ۰; transform-origin:۰ ۰; -webkit-transform:rotate(۹۰deg); -moz-transform:rotateZ(۹۰deg); -ms-transform:rotate(۹۰deg); -o-transform:rotate(۹۰deg); transform:rotate(۹۰deg); -webkit-transition:۵۰۰ms; -moz-transition:۵۰۰ms; -ms-transition:۵۰۰ms; -o-transition:۵۰۰ms; transition:۵۰۰ms; } .menuHolder li.s2:nth-of-type(6) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۷۵deg); -moz-transform:rotateZ(۷۵deg); -ms-transform:rotate(۷۵deg); -o-transform:rotate(۷۵deg); transform:rotate(۷۵deg); } .menuHolder li.s2:nth-of-type(5) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۶۰deg); -moz-transform:rotateZ(۶۰deg); -ms-transform:rotate(۶۰deg); -o-transform:rotate(۶۰deg); transform:rotate(۶۰deg); } .menuHolder li.s2:nth-of-type(4) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۴۵deg); -moz-transform:rotateZ(۴۵deg); -ms-transform:rotate(۴۵deg); -o-transform:rotate(۴۵deg); transform:rotate(۴۵deg); } .menuHolder li.s2:nth-of-type(3) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۳۰deg); -moz-transform:rotateZ(۳۰deg); -ms-transform:rotate(۳۰deg); -o-transform:rotate(۳۰deg); transform:rotate(۳۰deg); } .menuHolder li.s2:nth-of-type(2) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۱۵deg); -moz-transform:rotateZ(۱۵deg); -ms-transform:rotate(۱۵deg); -o-transform:rotate(۱۵deg); transform:rotate(۱۵deg); } .menuHolder .a6 li:nth-of-type(6) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۷۵deg); -moz-transform:rotateZ(۷۵deg); -ms-transform:rotate(۷۵deg); -o-transform:rotate(۷۵deg); transform:rotate(۷۵deg); } .menuHolder .a6 li:nth-of-type(5) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۶۰deg); -moz-transform:rotateZ(۶۰deg); -ms-transform:rotate(۶۰deg); -o-transform:rotate(۶۰deg); transform:rotate(۶۰deg); } .menuHolder .a6 li:nth-of-type(4) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۴۵deg); -moz-transform:rotateZ(۴۵deg); -ms-transform:rotate(۴۵deg); -o-transform:rotate(۴۵deg); transform:rotate(۴۵deg); } .menuHolder .a6 li:nth-of-type(3) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۳۰deg); -moz-transform:rotateZ(۳۰deg); -ms-transform:rotate(۳۰deg); -o-transform:rotate(۳۰deg); transform:rotate(۳۰deg); } .menuHolder .a6 li:nth-of-type(2) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۱۵deg); -moz-transform:rotateZ(۱۵deg); -ms-transform:rotate(۱۵deg); -o-transform:rotate(۱۵deg); transform:rotate(۱۵deg); } .menuHolder .a5 li:nth-of-type(5) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۷۲deg); -moz-transform:rotateZ(۷۲deg); -ms-transform:rotate(۷۲deg); -o-transform:rotate(۷۲deg); transform:rotate(۷۲deg); } .menuHolder .a5 li:nth-of-type(4) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۵۴deg); -moz-transform:rotateZ(۵۴deg); -ms-transform:rotate(۵۴deg); -o-transform:rotate(۵۴deg); transform:rotate(۵۴deg); } .menuHolder .a5 li:nth-of-type(3) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۳۶deg); -moz-transform:rotateZ(۳۶deg); -ms-transform:rotate(۳۶deg); -o-transform:rotate(۳۶deg); transform:rotate(۳۶deg); } .menuHolder .a5 li:nth-of-type(2) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۱۸deg); -moz-transform:rotateZ(۱۸deg); -ms-transform:rotate(۱۸deg); -o-transform:rotate(۱۸deg); transform:rotate(۱۸deg); } .menuHolder .a3 li:nth-of-type(3) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۶۰deg); -moz-transform:rotateZ(۶۰deg); -ms-transform:rotate(۶۰deg); -o-transform:rotate(۶۰deg); transform:rotate(۶۰deg); } .menuHolder .a3 li:nth-of-type(2) > a {background:#۰۰۰۰۰۰; color:hsla(۰,۰%,۱۰۰%,۱.۰۰); -webkit-transform:rotate(۳۰deg); -moz-transform:rotateZ(۳۰deg); -ms-transform:rotate(۳۰deg); -o-transform:rotate(۳۰deg); transform:rotate(۳۰deg); } .menuHolder li.s1:hover ul.p2 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHolder li.s2:hover ul.p3 { -webkit-transform:rotate(0deg); -moz-transform:rotateZ(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .menuHolder ul li:hover > a {background:#FFFFFF; color:#۰۰۰۰۰۰;} .menuHolder li.s2:hover > a {background:#FFFFFF; color:#۰۰۰۰۰۰;} .menuHolder .a6 li:hover > a {background:#FFFFFF; color:#۰۰۰۰۰۰;} .menuHolder .a5 li:hover > a {background:#FFFFFF; color:#۰۰۰۰۰۰;} .menuHolder .a3 li:hover > a {background:#FFFFFF; color:#۰۰۰۰۰۰;} .menuWindow {width:۱۱۰px; height:۱۱۰px; overflow:hidden; position:absolute; left:۰; top:۰; z-index:۱۰۰; -webkit-transition:0s 0s; -moz-transition:0s 0s; -ms-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s; } .menuHolder:hover .menuWindow {width:۳۱۰px; height:۳۱۰px; left:۰; top:۰; -webkit-transition:0s 0s; -moz-transition:0s 0s; -ms-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s; } .menuHolder span {display:block; -webkit-transform:rotate(۵deg); -moz-transform:rotateZ(۵deg); -ms-transform:rotate(۵deg); -o-transform:rotate(۵deg); transform:rotate(۵deg); } <style/> <div class="menuHolder"> <div class="menuWindow"> <ul class="p1"> <li class="s1"><a href="#">فروشگاه</a> <ul class="p2"> <li class="s2"><a href="#"><span>خرما</span></a> <ul class="p3 a3"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> <li class="s2"><a href="#"><span>خرما</span></a> <ul class="p3 a3"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> <li class="s2"><a href="#"><span>خرما</span></a> <ul class="p3 a6"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> <li class="s2"><a href="#"><span>خرما</span></a> <ul class="p3 a3"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> <li class="s2"><a href="#"><span>خرما</span></a> <ul class="p3 a3"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> <li class="s2 b6"><a href="#"><span>خرما</span></a> <ul class="p3 a5"> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> <li><a href="#">خرما</a></li> </ul> </li> </ul> </li> </ul> </div> </div> |
در حال بررسی
0
طراحی سایت 5 سال
۱۳۹۸/۷/۱۵ ۲۲:۱۱:۱۵
۱۳۹۸/۷/۱۵ ۲۲:۱۱:۱۵ 1 پاسخ ها
کاربر تازه 0
پاسخ ( 1 )
سلام
کل خصوصیت های rotate که دادید باید تغییر پیدا کنه، که کار بس دشواری است ….
یه نمونه منو براتون میزارم، که از این منویی که ساختید زیباتر هست(همین منو رو به صورت دلخواه آیتم هاش رو عوض کنید).
پیش نمایش:
کد HTML:
کد Css:
موفق باشید.