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

[pasargad-it]

درود . همانطور که قالب احتصاصی هست و مدیریت هنوز پابلیک نکردند اما چون نمونه این منو در نت موجود هست با کمی تغییرات در ظاهر تصمیم گرفتم این آموزش رو قرار دهم تا در جای دیگه به اسم خودشون ثبت نکنند . پس با ما همراه شوید .

نکته :

در مراجع دیگه این منو با جاوا طراحی شده که سنگین هست برای قالب اما علی آقا با کدهای css این منو رو طراحی کردند .

در مرحله اول کد های زیر رو در انتهای قالب

header قرار دهید :کد:

<div class="vbpro_left-IN"> <a href="link Topic">عنوان لینک اول</a> <a href="link Topic">عنوان لینک اول</a> <a href="link Topic">عنوان لینک اول</a> <a href="link Topic">عنوان لینک اول</a> <a href="link Topic">عنوان لینک اول</a> </div>

سپس کدهای زیر رو هم در اتهای قالب استایل additional.css قرار دهید :

کد:

.vbpro_left-IN {display: inline-block;background: rgb(241, 241, 241) url(http://vbpro.ir/images/VBpro_Sahand/styles/sprites.png) no-repeat right;border: 1px rgb(219, 219, 219) solid;border-radius: 5px;float: left;position: absolute;left: 0px;margin-top: -160px;overflow: hidden;font: normal 14px byekan;transition: 2s;height: 157px;padding-right: 40px;width: 200px;z-index: 999;}.vbpro_left-IN a {display: block;padding: 5px;background: rgb(252, 252, 252);margin: 5px;border: 1px rgb(224, 224, 224) solid;border-radius: 4px;}.vbpro_left-IN:hover {left: 0px;-webkit-animation: none;animation:none;}.vbpro_left-IN a:hover {background: rgb(255, 255, 255);border: 1px rgb(112, 93, 93) solid;border-left: 3px rgb(95, 95, 95) solid;transition: 100ms;}.vbpro_left-IN {width: 200px;height: 157px;position: relative;animation-duration: 10s;animation: myfirst 4s infinite;-webkit-animation: myfirst 4s infinite;}@keyframes myfirst{0%   {border-right: 2px rgb(255, 255, 255) solid;left:-195px; top:0px;}25%  {border-right: 2px rgb(199, 44, 44) solid;left:-185px; top:0px;}50%  {border-right: 2px rgb(255, 255, 255) solid;left:-195px; top:0px;}75%  {border-right: 2px rgb(199, 44, 44) solid;left:-185px; top:0px;}100% {border-right: 2px rgb(255, 255, 255) solid;left:-195px; top:0px;}}

اسکرین شات قبل از حرکت موس روی منو :

اسکرین شات یعد از حرکت موس روی منو :

موفق و سبز باشید ./