close
تبلیغات در اینترنت
کد css منو
loading...

کد های کاربردی سایت , گرافیک رایانه , CG, animation, cinema 4d, after effect , photoshap ,فوتوشاپ, افتر افکت,سینما فردی,انیمیشن 2 بعدی و سه بعدی , اموزش , دانلود رای

با سلام به تمامی دوستان یک نمونه کدcss امروز براتون گذاشتم  امیدوارم بدردتون بخوره در صورتی که سوال یا مشکلی داشتید اعلام کنید از این کد میتوان به عنوان تبلیغات متنی یا هر چیز دیگری با کمترین تغیرات ایجاد کرد   اینو قبل از تگ <head>  <style>     .menu-vertical {     width: 250px; /* optionnel, c'est pour la démo */     list-style: none; /* supprime les puces de liste */     padding: 4px; /* on fait un peu de place autour…

کد css منو



با سلام به تمامی دوستان یک نمونه کدcss امروز براتون گذاشتم  امیدوارم بدردتون بخوره در صورتی که سوال یا مشکلی داشتید اعلام کنید

پیشنمایش

از این کد میتوان به عنوان تبلیغات متنی یا هر چیز دیگری با کمترین تغیرات ایجاد کرد 

 اینو قبل از تگ <head> 

<style>

    .menu-vertical {  
  width: 250px; /* optionnel, c'est pour la démo */  
  list-style: none; /* supprime les puces de liste */  
  padding: 4px; /* on fait un peu de place autour des liens */  
  margin: 0; /* on annule les marges */  
  background: #F2F2F2;  
}  
   
/* styles des liens et éléments de liste */  
.mv-item,  
.mv-item a {  
  /* les liens et item deviennent des blocs */  
  /* suffit théoriquement à virer les puces de liste */  
  display: block;  
}  
   
/* styles des liens */  
.mv-item a {  
  margin: 1px 0; /* espace les liens d'1 px */  
  padding: 8px 20px; /* marges internes pour aérer */   
  color: #666;  
  background: #FFF;  
  text-decoration: none; /* on vire le soulignement */  
 
  /* on définit la transition pour les navigateurs */  
  -webkit-transition: all .3s; /* Chrome/Safari */  
  -moz-transition: all .3s; /* Firefox (plus trop nécessaire) */  
  transition: all .3s; /* syntaxe officielle */  
}  
   
/* styles changeants au survol et focus */  
.mv-item a:hover,  
.mv-item a:focus {  
  background: #1ABC9C;  
  color: #FFF;  
  padding-left: 30px; /* décalage du contenu de 10px vers la droite (30-20 = 10) */  
}  





/* changement du type de boîte */  
.mv-item a {  
  -webkit-box-sizing: padding-box;  
  -moz-box-sizing: padding-box;  
  box-sizing: padding-box;  
}

    </style>



اینو بعد از تگ بادی <body>


 <ul class="menu-vertical">  
        <li class="mv-item"><a href="#">Lorem ipsum</a></li>  
        <li class="mv-item"><a href="#">Dolor Sit</a></li>  
        <li class="mv-item"><a href="#">Amet consectetur</a></li>  
        <li class="mv-item"><a href="#">Adipiscing elit</a></li>  
    </ul>

hekmati بازدید : 417 یکشنبه 19 مرداد 1393 زمان : 15:43 نظرات ()
مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
اطلاعات کاربری
نام کاربری :
رمز عبور :
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 111
  • کل نظرات : 96
  • افراد آنلاین : 1
  • تعداد اعضا : 55
  • آی پی امروز : 25
  • آی پی دیروز : 57
  • بازدید امروز : 66
  • باردید دیروز : 121
  • گوگل امروز : 1
  • گوگل دیروز : 6
  • بازدید هفته : 360
  • بازدید ماه : 2,171
  • بازدید سال : 42,510
  • بازدید کلی : 363,957