اوردن منو در گوشه سمت چپ صفحه در html css

Question

اوردن منو در گوشه سمت چپ صفحه در html css

سوال

سلام من مخوام این منو ی html رو از بالای صفحه بیارم پایین صفحه خودم نتونستم هر جا هم که بردم هیچکس نتونست تورو خدا کمکم کنید خیلی کارم پاش گیره.

کد ها به صورت زیر میباشد :

<style>
				.menuHolder {font-family:appfont; width:100px; height:100px; position:fixed; z-index:100;  left:0; top:0; }
.menuHolder ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}
.menuHolder ul li {border-radius:0 300 300px 0; width:0; height:0;}
.menuHolder ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
}
.menuHolder ul.p1 li {position:absolute; left:0; top:0;}
.menuHolder ul.p2 {z-index:-1;}
.menuHolder ul.p3 {z-index:-1;}
.menuHolder li.s1 > a {font-family:appfont; position:absolute; display:block; width:100px; height:100px; background:#000000; color:hsla(0,0%,100%,1.00); border-radius:0 0 100px 0;border:solid;
border-color:hsla(0,0%,100%,1.00);
}
.menuHolder li.s2 > a {border:solid;
border-color:hsla(0,0%,100%,1.00);font-family:appfont;position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#000000; color:hsla(0,0%,100%,1.00); border-radius:0 0 200px 0;}
.menuHolder ul.p3 li a {border:solid;
border-color:hsla(0,0%,100%,1.00);font-family:appfont;position:absolute; display:block; width:100px; padding-left:200px; height:300px;background:#000000; color:hsla(0,0%,100%,1.00); border-radius:0 0 300px 0;}
.menuHolder ul ul {
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotateZ(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition:500ms;
-moz-transition:500ms;
-ms-transition:500ms;
-o-transition:500ms;
transition:500ms;
}
.menuHolder li.s2:nth-of-type(6) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a6 li:nth-of-type(6) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a5 li:nth-of-type(5) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(72deg);
-moz-transform:rotateZ(72deg);
-ms-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(54deg);
-moz-transform:rotateZ(54deg);
-ms-transform:rotate(54deg);
-o-transform:rotate(54deg);
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(36deg);
-moz-transform:rotateZ(36deg);
-ms-transform:rotate(36deg);
-o-transform:rotate(36deg);
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(18deg);
-moz-transform:rotateZ(18deg);
-ms-transform:rotate(18deg);
-o-transform:rotate(18deg);
transform:rotate(18deg);
}

.menuHolder .a3 li:nth-of-type(3) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#000000; color:hsla(0,0%,100%,1.00);
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

.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:#000000;}
.menuHolder li.s2:hover > a {background:#FFFFFF; color:#000000;}
.menuHolder .a6 li:hover > a {background:#FFFFFF; color:#000000;}
.menuHolder .a5 li:hover > a {background:#FFFFFF; color:#000000;}
.menuHolder .a3 li:hover > a {background:#FFFFFF; color:#000000;}

.menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100;
-webkit-transition:0s 0s;
-moz-transition:0s 0s;
-ms-transition:0s 0s;
-o-transition:0s 0s;
transition:0s 0s;
}
.menuHolder:hover .menuWindow {width:310px; height:310px;
left:0; top:0;
-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(5deg);
-moz-transform:rotateZ(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
<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

طراحی سایت 7 سال 2019-10-07T22:11:15+03:30 2019-10-07T22:11:15+03:30 1 پاسخ ها کاربر تازه 0

درباره mykeکاربر تازه

پاسخ ( 1 )

ارسال یک پاسخ

پرسش قبلی

پرسش بعدی

احمد آخوندی مدیر سایت · Answer 1 · 2019-10-07T22:58:37+03:30

سلام

کل خصوصیت های rotate که دادید باید تغییر پیدا کنه، که کار بس دشواری است ….

یه نمونه منو براتون میزارم، که از این منویی که ساختید زیباتر هست(همین منو رو به صورت دلخواه آیتم هاش رو عوض کنید).

پیش نمایش:

کد HTML:

<div id="circularMenu" class="circular-menu">

  <a class="floating-btn" onclick="document.getElementById('circularMenu').classList.toggle('active');">
    <i class="fa fa-plus"></i>
  </a>

  <menu class="items-wrapper">
    <a href="#" class="menu-item fa fa-facebook"></a>
    <a href="#" class="menu-item fa fa-twitter"></a>
    <a href="#" class="menu-item fa fa-google-plus"></a>
    <a href="#" class="menu-item fa fa-linkedin"></a>
  </menu>

</div>


<div id="circularMenu1" class="circular-menu circular-menu-left active">

  <a class="floating-btn" onclick="document.getElementById('circularMenu1').classList.toggle('active');">
    <i class="fa fa-bars"></i>
  </a>

  <menu class="items-wrapper">
    <a href="#" class="menu-item fa fa-home"></a>
    <a href="#" class="menu-item fa fa-user"></a>
    <a href="#" class="menu-item fa fa-pie-chart"></a>
    <a href="#" class="menu-item fa fa-cog"></a>
  </menu>

</div>

کد Css:

body {
  background-color: #EDEDED;
}
.circular-menu {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.circular-menu .floating-btn {
  display: block;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color: hsl(4, 98%, 60%);
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);  
  color: hsl(0, 0%, 100%);
  text-align: center;
  line-height: 3.9;
  cursor: pointer;
  outline: 0;
}

.circular-menu.active .floating-btn {
  box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}

.circular-menu .floating-btn:active {
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
}

.circular-menu .floating-btn i {
  font-size: 1.3em;
  transition: transform .2s;  
}

.circular-menu.active .floating-btn i {
  transform: rotate(-45deg);
}

.circular-menu:after {
  display: block;
  content: ' ';
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  background-color: hsl(4, 98%, 60%);
  transition: all .3s ease;
}

.circular-menu.active:after {
  transform: scale3d(5.5, 5.5, 1);
  transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper {
  padding: 0;
  margin: 0;
}

.circular-menu .menu-item {
  position: absolute;
  top: .2em;
  right: .2em;
  z-index: -1;
  display: block;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  font-size: 1em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  text-align: center;
  line-height: 3;
  background-color: hsla(0,0%,0%,.1);
  transition: transform .3s ease, background .2s ease;
}

.circular-menu .menu-item:hover {
  background-color: hsla(0,0%,0%,.3);
}

.circular-menu.active .menu-item {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
  transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
  transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
  transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
  transform: translate3d(-7em,1em,0);
}

/**
 * The other theme for this menu
 */

.circular-menu.circular-menu-left {
  right: auto; 
  left: 1em;
}

.circular-menu.circular-menu-left .floating-btn {
  background-color: hsl(217, 89%, 61%);
}

.circular-menu.circular-menu-left:after {
  background-color: hsl(217, 89%, 61%);
}

.circular-menu.circular-menu-left.active .floating-btn i {
  transform: rotate(90deg);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
  transform: translate3d(-1em,-7em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
  transform: translate3d(3.5em,-6.3em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
  transform: translate3d(6.5em,-3.2em,0);
}

.circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
  transform: translate3d(7em,1em,0);
}

موفق باشید.

عضویت در سایت

ورود

فراموشی رمز عبور

ورود

عضویت در سایت

اوردن منو در گوشه سمت چپ صفحه در html css

اوردن منو در گوشه سمت چپ صفحه در html css

درباره mykeکاربر تازه

پرسش های مشابه

فرم لاگین

مشکل در کد php

وردپرس

غیر فعال کردن فید ها در سایت

حذف شدن منو سایت

پاسخ ( 1 )

ارسال یک پاسخ

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران