01 از 06
نحوه ایجاد ناوبری تابلو شده با CSS و بدون تصاویر
ناوبری در صفحات وب یک فرم از یک لیست است و ناوبری تببیدی مانند یک لیست افقی است. به راحتی می توان ناوبری Tabbed افقی را با CSS ایجاد کرد، اما CSS 3 ابزارهای چندگانه ای برای آنها فراهم می کند که حتی بهتر جلوه دهند.
این آموزش شما را از طریق HTML و CSS مورد نیاز برای ایجاد یک منوی Tabbed CSS می برد. روی آن لینک کلیک کنید تا ببیند چطور به نظر می رسد.
این منوی برگه دار هیچ تصویری ندارد ، فقط HTML و CSS 2 و CSS 3. این می تواند به راحتی ویرایش شود تا زبانه های بیشتری اضافه شود یا متن را در آنها تغییر دهد.
پشتیبانی مرورگر
این منوی برگه در همه مرورگرهای اصلی کار خواهد کرد. اینترنت اکسپلورر گوشه های گرد را نشان نمی دهد، اما در غیر این صورت، زبانه ها را مانند فایرفاکس، سافاری، اپرا و کروم نشان می دهد.
02 از 06
فهرست منو خود را بنویسید
تمام منوی ها و زبانه های ناوبری واقعا یک لیست غیر ارادی هستند. بنابراین اولین چیزی که میخواهید انجام دهید این است که لیستی از فهرستهای نامحدود لینکها را به جایی که میخواهید ناوبری Tabbed خود را وارد کنید، بنویسید.
این آموزش فرض است که شما در حال نوشتن HTML خود را در یک ویرایشگر متن و شما می دانید کجا قرار دادن HTML برای منو خود را در صفحه وب خود.
لیست غیر ارادی خود را مانند این بنویسید:
- class = "tablist">
- CSS 3
- id = "current"> زبانه ها
- برای
- منوها
متوجه خواهید شد که کد دو مورد را فراخوانی می کند: class = "tablist" و id = "current". اول لازم است اگر کلاس لیستبندی را در فهرست غیر ارادی خود قرار ندهید، زبانهها کار نخواهند کرد. دوم اختیاری است قرار دادن id = "current" در هر کدام از برگه هایی که می خواهید در آن صفحه برجسته شود. من معمولا از این برای برجسته کردن صفحه ای که در آن هستم استفاده میکنم، اما میتوانید از آن برای برجسته کردن برگه مهم استفاده کنید. یا شما می توانید آن را کاملا حذف کنید.
03 از 06
شروع به ویرایش صفحه سبک خود کنید
شما می توانید یک ورق سبک خارجی یا یک ورق سبک داخلی استفاده کنید . صفحه منوی نمونه از یک ورقه سبک داخلی در
سند استفاده می کند.اول ما خودمان UL را سبک می کنیم
این جایی است که ما از جدول جدول در HTML استفاده می کنیم. به جای اینکه یک برچسب UL را طراحی کنید که تمام لیست های غیر ارادی را بر روی صفحه شما سبک می کند، فقط باید کلاس UL را سبک کنید. tablist بنابراین اولین ورودی در CSS شما باید باشد:
.tablist {}من دوست دارم قبل از زمان به پایان برس زانو بند (curly brace) بپیوندم، بنابراین بعدا آن را فراموش نخواهم کرد.
در حالیکه ما از لیست تگ لیست نامحدود برای لیست منوی تب استفاده می کنیم، اما ما نمی خواهیم که هر گلوله یا شماره خالی در آن باشد. بنابراین اولین سبک شما باید اضافه شود. لیست سبک: هیچ؛ این به مرورگر می گوید که در حالی که یک لیست است، یک لیست با هیچ سبک از پیش تعیین شده (مانند گلوله یا اعداد) نیست.
سپس شما می توانید ارتفاع لیست خود را برای مطابقت با فضای مورد نظر برای پر کردن آن تنظیم کنید. من برای ارتفاع من 2em انتخاب کردم، چون این دو برابر اندازه فونت استاندارد است و حدود نیمی از EM بالا و زیر متن زبانه را می دهد. ارتفاع: 2m؛ اما شما می توانید عرض خود را به هر اندازه که می خواهید را تنظیم کنید. برچسب های UL به طور خودکار 100٪ از عرض را می گیرند، بنابراین، مگر اینکه شما می خواهید آن را کوچکتر از ظرف کنونی، می توانید عرض را از آن خارج کنید.
در نهایت، اگر صفحه سبک اصلی شما برای تنظیمات پیش فرض برای برچسب های UL و OL وجود ندارد، شما می خواهید آنها را وارد کنید. بدین معنی است که شما باید حاشیه ها، حاشیه ها و لاین ها را در UL خود خاموش کنید. padding: 0؛ حاشیه: 0؛ مرز: هیچ؛ اگر شما قبلا برچسب UL را بازنشانی کرده اید، می توانید حاشیه ها، حاشیه ها یا مرز را به چیزی که با طراحی شما سازگار است تغییر دهید.
کلاس نهایی tablist شما باید مانند این باشد:
.tablist {list-style: none؛ ارتفاع: 2m؛ padding: 0؛ حاشیه: 0؛ مرز: هیچ؛ }04 از 06
ویرایش لیست موارد LI
هنگامی که شما فهرست غیر ارادی خود را مدلسازی کرده اید، باید برچسب های LI را درون آن بنویسید. در غیر این صورت، آنها مانند یک لیست استاندارد عمل می کنند و هر حرکت به خط بعدی بدون قرار دادن زبانه های خود به درستی عمل می کنند.
ابتدا، ویژگی سبک خود را تنظیم کنید:
.tablist li {}سپس شما می خواهید زبانه های خود را به طوری که آنها در سطح افقی قرار می گیرند. شناور به سمت چپ؛
و فراموش نکنید که برخی از حاشیه ها را بین زبانه ها اضافه کنید، بنابراین آنها با هم ادغام نمی شوند. حاشیه راست: 0.13em؛
سبک لی شما باید چنین باشد:
.tablist li {float: left؛ حاشیه راست: 0.13em؛ }05 از 06
ایجاد زبانهها مانند Tabs با CSS 3
برای انجام بیشتر بار سنگین در این ورق سبک، من لینک ها را در لیست غیر ارادی هدف قرار می دهم. مرورگرها متوجه شده اند که لینک ها در صفحه وب بیشتر از سایر تگ ها کار می کنند، بنابراین مرورگرهای قدیمی تر برای رعایت مواردی مانند حالت شناور، اگر آنها را به تگ لنگر (لینک) متصل کنید، ساده تر است. بنابراین ابتدا خواص سبک خود را بنویسید:
.tablist li a {} .tablist li a: شناور {}از آنجا که این برگه ها باید مانند یک برگه در یک برنامه عمل کنند، شما می خواهید کل ناحیه تب را کلیک کنید، نه فقط متن مرتبط. برای انجام این کار، شما باید تگ A را از حالت معمولی " inline " آن به یک عنصر بلوک تبدیل کنید . نمایش: بلوک؛ (اگر شما علاقه مند به دانستن بیشتر در مورد تفاوت، به عنوان خوانده شده بلوک سطح در مقابل عناصر درون خطی .)
سپس، یک راه آسان برای زدن زبانه های خود را به یکدیگر متقارن است، اما هنوز انعطاف پذیری متناسب با عرض متن، ایجاد یکپارچه سازی سمت راست و چپ است. از ویژگی امپلی استرپشتی استفاده کردم تا بالا و پایین را به 0 و به سمت راست و چپ به 1em تنظیم کنم. padding: 0 1em؛
من همچنین تصمیم گرفتم لینک های زیر را حذف کنم، به طوری که زبانه ها کمتر به عنوان لینک ها نگاه می کنند. اما اگر مخاطبان شما ممکن است با آن اشتباه گرفته شوند، این خط را ترک کنید. پیوند دکوراسیون: هیچ؛
با قرار دادن یک حاشیه نازک در اطراف زبانه ها، آنها را مانند برگه ها می بینند. من از املاک مختلط مرزی برای قرار دادن مرز در اطراف مرز چهار طرف استفاده می شود: 0.06em جامد # 000؛ و سپس از خصوصیت مرزی پایین استفاده کرد تا آن را از پایین حذف کند. border-bottom: 0؛
سپس برخی تنظیمات مربوط به فونت، رنگ و رنگ پسزمینه زبانه ها را انجام دادم. این را به سبک هایی که سایت شما را می سازند، تنظیم کنید. فونت: bold 0.88em / 2em arial، ژنو، helvetica، sans-serif؛ رنگ: # 000؛ رنگ پس زمینه: #ccc؛
کلیه سبک های فوق باید در برگه select tablist قرار بگیرند. قانون، به طوری که آنها به طور کلی تگ های لنگر را تحت تاثیر قرار می دهند. سپس برای ایجاد زبانه ها بیشتر قابل کلیک می شود، شما باید چند قانون دولتی را اضافه کنید. tablist li a: hover.
دوست دارم رنگ متن و پسزمینه را تغییر دهم تا زمانی که روی آن موس را پاپ بگذارید پاپ کنید. پس زمینه: # 3cf؛ رنگ: #fff؛
و من یادآوری دیگری برای مرورگرها داشتم که می خواهم پیوند آن را باقی نگذارم. متن دکوراسیون: هیچ؛ یکی دیگر از روشهای رایج این است که با استفاده از ماوس بر روی برگه، خط زیر را به عقب برگردانید. اگر می خواهید این کار را انجام دهید، آن را به دکوراسیون متن تغییر دهید: زیر خط؛
اما CSS 3 کجاست؟
اگر توجه کردید، احتمالا متوجه شده اید که هیچ سبک CSS 3 در صفحه سبک استفاده نشده است. این مزیت کار در هر مرورگر مدرن، از جمله اینترنت اکسپلورر است. اما این باعث نمی شود که زبانه ها بیش از مربع مربع شبیه به چیزی باشند. با اضافه کردن یک کادر محدوده تماس با سبک CSS 3 (و آن مربوط به تماس های خاص مرورگر) می توانید لبه ها را گرد کنید تا بیشتر شبیه زبانه ها در یک پوشه مانیل باشند.
سبک هایی که باید به لیست tab اضافه کنید: -webkit-border-top-right-radius: 0.50em؛ -webkit-border-top-left-radius: 0.50em؛ -moz-border-radius-topright: 0.50em؛ -moz-border-radius-topleft: 0.50em؛ مرز بالا سمت راست شعاع: 0.50em؛ border-top-left-radius: 0.50em؛
اینها قوانین سبک نهایی من هستند:
.tablist li a {display: block؛ padding: 0 1em؛ متن دکوراسیون: هیچ؛ مرز: 0.06em جامد # 000؛ border-bottom: 0؛ فونت: bold 0.88em / 2em arial، ژنو، helvetica، sans-serif؛ رنگ: # 000؛ رنگ پس زمینه: #ccc؛ / * CSS 3 elements * / webkit-border-top-right-radius: 0.50em؛ -webkit-border-top-left-radius: 0.50em؛ -moz-border-radius-topright: 0.50em؛ -moz-border-radius-topleft: 0.50em؛ مرز بالا سمت راست شعاع: 0.50em؛ border-top-left-radius: 0.50em؛ } .tablist li a: hover {background: # 3cf؛ رنگ: #fff؛ متن دکوراسیون: هیچ؛ }با استفاده از این سبک ها، منوی Tabbed menu که در تمام مرورگرهای اصلی کار می کند و به نظر می رسد مانند زبانه های چاپ شده در مرورگرهای سازگار با CSS 3 است. صفحه بعدی به شما یک گزینه دیگر را می دهد که می توانید آن را حتی بیشتر استفاده کنید.
06 از 06
نشانگر فعلی را برجسته کنید
در HTML من ایجاد کردم، UL یک عنصر لیست با شناسه داشت. این به شما اجازه می دهد تا یک LI را از بقیه به سبک دیگری بسپارید. شایع ترین وضعیت این است که زبانه فعلی به نحوی موضع بگیرد. راه دیگری برای فکر کردن این است که می خواهید زبانه هایی را که زندگی نمی کنند، به خاکستری بیافزایند. پس از آن تغییر دهید که ID در صفحات مختلف است.
من هر دو # برچسب فعلی A و همچنین # جریان A: پنهان شناور را به طوری که هر دو کمی متفاوت هستند. شما می توانید رنگ، رنگ پس زمینه، حتی ارتفاع، عرض و پوسته آن عنصر را تغییر دهید. هر گونه تغییری را در طراحی خود ایجاد کنید.
.tablist li # current a {پس زمینه: # 777؛ رنگ: #fff؛ } .tablist li # current a: hover {background: # 39C؛ }و شما انجام می شود! شما فقط یک منب tabbed برای وب سایت خود ایجاد کرده اید.