منوی فلت با با سبک هایپر تمپ

با عرض سلام و خسته نباشید خدمت همه ی کاربران و میهمانان عزیز هایپر تمپ

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

با عرض سلام و خسته نباشید خدمت همه ی کاربران و میهمانان عزیز هایپر تمپ

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

جهت استفاده مراحل زیر را به دقت انجام دهید:

1- کد زیر را در head قالبتون قرار دهید:

<style> * { transition: all 0.5s ease 0.1s; } .hypertemp-manue { font-size: 12px; height: 54px; background-color: #56BC8A; z-index: 1000; line-height: 54px; top: 0px; right: 0px; width: 100%; box-sizing: border-box; position: fixed; border-bottom: 3px solid #fff; box-shadow: 0px -5px 13px -1px; } .hypertemp-manue-logo{ float:right; padding:0 20px padding-left: 0px; margin-right: 14px; } .hypertemp-manue-logo2{ float:right; } .hypertemp-manue-logo2 a { float: right; text-decoration: none; color: #fff; } .hypertemp-manue-logo img { box-shadow: 0px 6px 8px -9px #000; border-radius: 100%; border: 1px solid #FFF; background-color: #FFF; margin-top: 7px; } .hypertemp-manue-logo a { float: right; text-decoration: none; margin-top: -2px; } .hypertemp-manue-logo a span { font-size: 17px; text-decoration: none; padding: 17px; color: #FFF; } .hypertemp-manue-logo img:hover { transition: all 0.5s ease-in 0s; transform: rotate(-360deg); } .hypertemp-manue__actions{ float:left } #titr{ margin-top: -4px; } #titr2 { margin-top: 15px; background-color: rgba(0,0 , 0, 0.1); padding: 5px; border-radius: 25px; line-height: 1; padding-right: 8px; padding-left: 8px; } .hypertemp-manue__actions nav { float: right; margin-left: 22px; } .hypertemp-manue__actions nav ul { list-style: none outside none; } .hypertemp-manue__actions nav ul a { text-decoration: none; color: #000; } .hypertemp-manue__actions nav ul li { float: right; padding: 0px 4px; margin-top: -12px; width: 69px; background-color: #F8F8F8; text-align: center; } .hypertemp-manue__actions nav ul li:hover { background-color: rgba(0, 0, 0, 0.1); color: #fff; } </style>

2- کد زیر را در body قالبتون قرار دهید :

<div class="hypertemp-manue"> <div class="hypertemp-manue-logo"> <a href="#"><img alt="هایپر تمپ | HyperTemp" title="هایپر تمپ | HyperTemp" src="http://up.hypertemp.ir/up/hypertemp/Hyper_Temp/ver1/img/logo.png"></a> <a href="#" class="btn btn--primary" id="titr"><span>هایپر تمپ</span></a> </div> <div class="hypertemp-manue-logo2"> <a href="#" class="btn btn--primary" id="titr2"><span>نگاهی متفاوت به دنیای <a href="http://www.hypertemp.ir/cat/21/graphic.html" title="گرافیک" target="_blank">گرافیک</a> و کدنویسی</span></a> </div> <div class="hypertemp-manue__actions"> <nav> <ul> <a href="#"><li>صفحه اصلی</li></a> <a href="http://www.hypertemp.ir/Forum/Catgory/39/Post/120"><li>چت روم</li></a> <a href="http://www.hypertemp.ir/Forum/Catgory/29/Post/40"><li>الکسای سایت</li></a> <a href="www.hypertemp.ir/Forum/Catgory/38/Post/19"><li>معرفی اعضا</li></a> </ul> </nav> </div> </div>

هرگونه سوال و یا مشکلی داشتید در نظرات اعلام کنید تا راه حل را براتون توضیح دهیم با تشکر مدیریت هایپر تمپ.