جهت استفاده مراحل زیر را به دقت انجام دهید:
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 20pxpadding-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="https://rozup.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>نگاهی متفاوت به دنیای گرافیک و کدنویسی</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>برای دیدن جزئیات دمو رو ببینید :
