یکشنبه , فروردین 6 1396

ویجت تب

در این لحظه ویجت تب رو برای شما آماده کردیم

این ویجت تنها با css ساخته شده برای همین بسیار سبک هست

برای دیدن پیشنمایش و دانلود به ادامه مطلب مراجعه نماییدwiget tabed

برای استفاده از این ویجت به طور خلاصه عرض میکنم

برای افزودن استایل کد زیر رو به تگ head اضافه میکنیم

و برای اضافه کردن ویجت چت کد های زیر رو جای موردنظر صفحه html قرار میدیم
امیدوارم به کارتون بیاد

راستی اگه از این مطلب خوشتون اومد لطفا بهش امتیاز بدین،ممنون

درباره ی مرتضی لطفی نژاد

یادم می یاد از کوچیکی علاقه زیادی به کامپیوتر داشتم و اولین کاری رو که یاد گرفتم تعویض ویندوز بود هیچ وقت از بازی با کامپیوتر خوشم نمی یاد.به طراحی وبسایت علاقه زیادی دارم و از یاد گرفتن لذت می برم

مطلب پیشنهادی

لیست ماه های شمسی

در این لحظه براتون لیست ماه های شمسی رو به روش چینشی و با استایلی …

3 دیدگاه

  1. سلام ممنون خوب بود فقط چطوری میشه تب انتخابی پیش فرض منو اول باشد؟ الان منو آخر فعاله

    • مرتضی لطفی نژاد

      با سلام
      در مورد سوالتون باید بگم که این تب با css3 نوشته شده و برای تغییر یک تب باید اولین گره رو شما رایت کنید که مجبورید تک تک اونا رو تغییر بدین که امکان داره تو بقیه کدها مشکل ایجاد کنه
      در هر صورت نشد هم نداره و با یه کمی وقت بیشتر میشه انجامش داد
      موفق باشید

  2. سلام من تا اینجا کار کردم ولی وقتی رو تب دوم کلیک می کنم مطالب آن در پایین تب اول میاد. لطفا این مشکل رو ببینید چطوری حل میشه. ممنون میشم.

    .widget {
    position:relative;
    margin:0 auto 8px;
    background:#fff;
    }

    .widget ol li {
    line-height:20px;
    padding:6px 10px 6px 6px;
    background:url(images/bullet.png) no-repeat right 14px;
    border-bottom:1px solid #cecece;
    }
    .widget ol li:last-child {
    border-bottom:none;
    }
    .widget ol li a {
    color:#3a3a3a;
    display:block;
    text-align:justify;
    }
    .widget ol li:hover a {
    color:#2a8fba;
    }
    .widget ol li:active a {
    color:#0d728d;
    }
    .widget ol li:hover {
    background:url(images/bullet-hover.png) no-repeat right 14px;
    }
    .widget-tabs {
    position:absolute;
    top:0;
    left:0;
    right:0;
    /* Make the last tab in the DOM the left-most tab on the screen.
    That way we can activate it by default and still be able to
    deactivate it later using the ~ selector. */
    border-bottom:1px solid #2980a8;
    padding:0;
    background:#f7f7f7;
    }

    .widget-tab,
    .widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab,
    .widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab,
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab {
    position: relative;
    display: inline-block;
    vertical-align: top;
    background: #fcfcfc;
    border: solid #cecece;
    border-width: 1px 1px 0;
    border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0;
    -webkit-border-radius:8px 8px 0 0;
    -o-border-radius:8px 8px 0 0;
    -khtml-border-radius:8px 8px 0 0;
    /* Reset %active-widget-tab */
    padding-bottom: 0;
    bottom: auto;
    width:48.5%;
    height:35px;
    }
    .widget-tab > .widget-tab-link,
    .widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab > .widget-tab-link,
    .widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab > .widget-tab-link,
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab > .widget-tab-link {
    margin: 0;
    border-top: 0;
    }

    .widget-tab + .widget-tab {
    margin-right:0;
    border-left:0;
    border-right:0;
    }

    .widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child,
    .widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2),
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child {
    bottom: -1px;
    margin-top: 0;
    padding-bottom:0;
    background: #2fccff; /* Old browsers */
    /* IE9 SVG, needs conditional override of ‘filter’ to ‘none’ */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJmY2NmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmZjY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTYlIiBzdG9wLWNvbG9yPSIjMjk3ZmE3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTYlIiBzdG9wLWNvbG9yPSIjMjk3ZmE3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2fccff), color-stop(0%, #2fccff), color-stop(96%, #297fa7), color-stop(96%, #297fa7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* IE10+ */
    background: linear-gradient(to bottom, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#2fccff’, endColorstr=’#297fa7′, GradientType=0 ); /* IE6-8 */
    border-top: 0;
    border-left:0;
    border-right:0;
    }
    .widget-tab:last-child > .widget-tab-link,
    .widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child > .widget-tab-link,
    .widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) > .widget-tab-link,
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child > .widget-tab-link {
    margin: 0 -1px;
    }

    .widget-tab:first-child {
    margin-left:4px !important;
    bottom: -1px;
    margin-top: 0;
    padding-bottom:0;
    border-top: 0;
    border-left:0;
    border-right:0;
    background: #2fccff; /* Old browsers */
    /* IE9 SVG, needs conditional override of ‘filter’ to ‘none’ */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJmY2NmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmZjY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTYlIiBzdG9wLWNvbG9yPSIjMjk3ZmE3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTYlIiBzdG9wLWNvbG9yPSIjMjk3ZmE3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2fccff), color-stop(0%, #2fccff), color-stop(96%, #297fa7), color-stop(96%, #297fa7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* IE10+ */
    background: linear-gradient(to bottom, #2fccff 0%, #2fccff 0%, #297fa7 96%, #297fa7 96%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#2fccff’, endColorstr=’#297fa7′, GradientType=0 ); /* IE6-8 */
    }

    .widget-tab:last-child,
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:first-child {
    background: #fcfcfc;
    border: solid #cecece;
    border-width: 1px 1px 0;
    border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0;
    -webkit-border-radius:8px 8px 0 0;
    -o-border-radius:8px 8px 0 0;
    -khtml-border-radius:8px 8px 0 0;
    /* Reset %active-widget-tab */
    padding-bottom: 0;
    bottom: auto;
    }

    .widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child > .widget-tab-link,
    .widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) > .widget-tab-link,
    .widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child > .widget-tab-link {
    color:#fff;
    text-shadow:0 1px 0 #000;
    }

    /* Deactivate the default tab when a preceding tab is activated. */
    .widget-tab-link {
    display:block;
    min-width:60px;
    font-size:1.1em;
    padding-top:9px;
    color:inherit;
    text-align:center;
    text-decoration:none;
    border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0;
    -webkit-border-radius:8px 8px 0 0;
    -o-border-radius:8px 8px 0 0;
    -khtml-border-radius:8px 8px 0 0;
    }

    .widget-list {
    display:none;
    padding:42px 6px 6px 6px;
    border:1px solid #cecece;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -o-border-radius:8px;
    -khtml-border-radius:8px;
    /* The last list is activated (visible) by default. */
    }
    .widget-list:last-of-type {
    display: block;
    }
    .widget-list:target {
    display: block;
    /* Hide the default list when another is activated. */
    /* First list activates the first tab, second list activates the second tab, etc. */
    }
    .widget-list:target ~ .widget-list {
    display: none;
    }

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

به خانواده بزرگ فارس اسکریپت بپیوندید

با عضویت در سایت فارس اسکریپت به مطالب بروز کسب درآمد از طراحی صفحات وب و طراحی قالب دست خواهید یافت

Powered by themekiller.com