http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

תפריט CSS / HTML טהור

  1. תפריט CSS / HTML טהור
  2. מבנה תפריט אופקי HTML
  3. אנו מפעילים את התפריט האופקי תוך כדי הצבעה.
  4. תאר את התפריט הנפתח CSS / HTML

תפריט CSS / HTML טהור

תפריט CSS / HTML טהור

במדריך זה אנו נעשה תפריט אופקי קלאסי על CSS טהור. יש לו סמלים ברשימות. כאשר מצביע על פריט, הוא משנה בצורה חלקה את צבע הכפתור ואת הטקסט, צל מוסיף. רשימות הנפתחת יכול להתבצע מרובת רמות ואת העיקר הוא כל מיושם די פשוט על CSS3 טהור.

המשך השיעור כאן - חלק ב ' תפריט אופקי ".

ראה את העט פויזבו מאת Denis ( @Dwstroy ) ב קודפנים .

בשיעור השיעור:

  • התצוגה כ
  • שימוש במעבר;
  • למקם את האלמנטים עם המיקום.

מבנה תפריט אופקי HTML

ראשית, רשום את הסימון מתחת לתפריט האופקי. אנו פותחים את סביבת הפיתוח שלנו במקרה שלי, זה PhpStorm, ליצור קובץ index.html, לרשום את HTML מסגרת: 5, להחליף lang עם ru.

כל מטא יימחק למעט הקידוד, אני ירשום את הכותרת שלי " תפריט טום ".

בין הגוף אנחנו כותבים את תג הכותרת, ובתוכו יש בלוק עם התפריט .dws-class שיכיל את התפריט שלנו. הבא, המבנה יהיה כדלקמן, ניצור רשימות בסכום של חמש חתיכות. בכל רשימה יהיה קישור עם התכונה href = "#". אז אני אלך לסמל עם הכיתה .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> [href = "#"]> i.fa.fa- </ nav> </ header>

אנחנו לוחצים להגיש בקשה.

בוא נרשום את שם פריטי התפריט ( דף הבית, מוצרים, שירותים, חדשות, אנשי קשר ).

לאחר מכן, בחר וחבר את הסמלים. עבור אל האתר, אנו נבחר את הסמלים עבור פריטים אלה בתפריט:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa facogs"> </ i> <i = "fa fa -th list "> </ i> <i class = "fa faeme -open "> </ i>


הורד את הארכיון מהאתר עם סמלים, לחלץ את תוכנו למחשב, להעתיק את התיקייה גופנים ותיקיית css לסביבת הפיתוח שלך.

התיקייה גופנים מכילה גופני סמל ותיקייה css מכילה את הסגנונות שלהם. סגנונות דחוסים ניתן להסיר גופן- awesome.min, אנו מתחברים את הגופן uncompressed- awesome.css.

ב- index.html אנו מחברים סמלים, ואנו רושמים כל פריט עם סגנון הסמל שלו ( דף הבית , עגלת קניות , גלגלי שיניים , רשימה , מעטפה פתוחה ).

עשינו את המסגרת הראשית, ליצור תפריט משנה לאחר תיאור הסגנון הראשי, ועכשיו אנו ניצור קובץ שבו נתאר את הסגנונות העיקריים של סגנון התפריט האופקי .css ולחבר אותו index.html. כדי לבדוק את סגנונות מחוברים, ליצור תיקיית img, בו אני אשים תמונה שרירותית על הרקע. בואו נכתוב את חיבור התמונה באמצעות רקע.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

כפי שאנו רואים, הכל כבר מוצג ולאחר מכן נמשיך תיאור של סגנונות.

ראשית, בואו לאפס את כל ההישגים, אשר דפדפנים שונים יכולים להגדיר כברירת מחדל:

.dws-menu * {margin: 0; ריפוד: 0; }

הגדר את הכותרת ל 200 פסגות. להקצות אשר ניתן להוריד בנפרד להתחבר לעצמך באתר, רק במקרה, לכתוב גופנים נוספים.

כותרת {margin: 200px; משפחת גופנים: Cuprum, Arial, Helvetica, sans-serif; }

הסתר את הסמנים ברשימות:

.dws-menu ul, .dws-menu ol {list-style: none; }

הרשימות יוצגו אופקית בתצוגה: פשתן, ונעשה זאת במרכז:

.dws-menu> ul {display: flex; justify-content: center; }

בכותרת אנחנו נכניס רק את הדף, נכתוב שולי הדף.

כותרת { margin-top: 200px; משפחת גופנים: Cuprum, Arial, Helvetica, sans-serif; }

בואו לעצב את התפריט שלנו, להגדיר את הצבע של הכפתורים, את הגופן, וכו '

בחר קישורים nav> ul li, ולהפוך אותם לחסום אלמנטים. הגדר את הרקע בתפריט, לכתוב כניסות, לציין את גודל, צבע, להסיר את קו תחתון, ולהפוך את הכותרות באותיות גדולות.

.dws-menu> ul li a התצוגה: block; רקע: #ececed; ריפוד: 15px 30px 15px 40px; font-size: 14px; צבע: # 454547; text-decoration: none; טקסט-המרה: אותיות רישיות; }

לאחר מכן מקמו את הסמלים, הקצו את הרשימות למיקום: יחסית; עבור יישור נוסף של סמלים:

.dws-menu> ul li {למצב: יחסית; }

הבא, אנו בוחרים סמלים, למקם אותם לחלוטין, לעשות הזחה מלמעלה ב 15 פסגות, מן 12 פסגות שמאל, להגדיל את הגודל ל 18 פסגות.

.dws-menu> ul li a a .fa {position: מוחלט; top: 15px; משמאל: 12px; font-size: 18px; }

הקצה את המפריד בצורה של גבול לרשימות, בחר את האלמנט הראשון LI, הגדר את הגבול. אנו בוחרים את האלמנט האחרון LI ומקצים לו גבול דומה.

.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }

ביצוע מפרידים עבור רשימות LI:

.dws-menu> ul li {למצב: יחסית; border-right: 1px solid # c7c8ca; }

התפריט רכש את המראה, ואז אתה יכול להמשיך לתיאור של סגנונות במהלך מעבר.

אנו מפעילים את התפריט האופקי תוך כדי הצבעה.

בחר קישורים והקצה צבע לבלוק, והקצה את הצבע של הקישור עצמו עם הסמל ללבן. בואו נוסיף צל כהה נוסף. בעזרת המעבר ב -0.3 שניות נעשה הופעה חלקה:

.dws-menu li a: ריחוף {background: # 454547; צבע: #ffffff; box-shadow: 1px 5px 10px -5px black; המעבר: כל הקלות 0.3; }

וכדי להפוך את האפקט הזה להיעלם בצורה חלקה, להוסיף סגנון זה כדי להקל על הקישור:

.dws-menu> ul li a התצוגה: block; רקע: #ececed; ריפוד: 15px 30px 15px 40px; font-size: 14px; צבע: # 454547; text-decoration: none; טקסט-המרה: אותיות רישיות; המעבר: כל הקלות 0.3; }

התפריט הראשי הסתיים ותוכלו להמשיך בתיאור תפריט המשנה ותפריטי המשנה המשובצים בו.

תאר את התפריט הנפתח CSS / HTML

אודות אנו פותחים את index.html ומוסיפים, לדוגמה, תפריט נוסף למוצרים. הכנס את UL בין רשימות LI ואת המקום חמש רשימות בו, אשר יכיל קישורים עם התכונה herf = "#".

ul> li * 5> a [href = "# #]

אנחנו לוחצים כדי להחיל, לכתוב את שם הפריטים ( ביגוד, אלקטרוניקה, מזון, כלים, חיים כימיה ).

<ul> <li> <a href="#"> ביגוד </a> </ li> <li> <a href="#"> אלקטרוניקה </a> </ li> <li> <a href = "#"> אוכל </a> </ li> <li> <a href="#"> כלים </a> </ li> <li> <a href="#"> חיים. כימיה </a> </ li> </ ul>

לאחר מכן פתח את style.css ותאר את סגנונות תפריט המשנה.

אנו בוחרים את הרשימה השנייה ומקצים לה מיקום: מוחלט; , בואו להגדיר את רוחב המינימום ל 150 פסגות.

/ * תת תפריט * / .dws-menu li ul {position: מוחלט; min-width: 150px; }

בואו נכתוב לרשימות הגבול בשיא אחד.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

עבור קישורים בתת תפריט, אנו נקבע כניסות ב 10 פסגות., הסר את השינוי טקסט ולעשות את הרקע כמה גוונים רקע כהה: # e4e4e5; .

.dws-menu li> ul li a {ריפוד: 10px; text-transform: none; רקע: # e4e4e5; }

לאחר מכן צור תפריט משנה נוסף. עבור אל קובץ הסימון למשל בטופס "אלקטרוניקה" על ידי תפריט אנלוגיה כפי שעשינו קודם. אנו מתארים את הכותרות של הפריטים ( מצלמות, מחשבים, טלפונים ) ולשמור.

<li> <a href="#"> אלקטרוניקה </a> <ul> <li> <a href="#"> מצלמות </a> </ li> <li> <a href="#"> מחשבים </a> </ li> <li> <a href="#"> טלפונים </a> </ li> </ ul> </ li>

הם הוצאו, אבל מוסתר תחת התפריט הראשי, עכשיו עמדה: מוחלטת; מקונן UL ולהעביר אותו לשיא 150. בפברואר

.dws-menu li> ul li ul {position: מוחלט; ימין: -150px; top you01; }

לאחר מכן, אנו הופכים את תפריט המשנה להופיע בעת מיקוד הפריטים העיקריים של התפריט העליון, עבור זה אנו מוסיפים להציג: none; ובכך להסתיר את כל הנקודות הפנימיות.

/ * תת תפריט * / .dws-menu li ul {position: מוחלט; min-width: 150px; התצוגה: none; }

ועל ההופעה שלהם, נוכל לבחור את הרשימות על העבר ולהציג אותם בעזרת התצוגה: לחסום; .

.dws-menu li: hover> ul {display: block; }

עכשיו אתה יכול להוסיף רב ברמת התפריטים פשוט על ידי העתקת בלוק UL, שינוי הפריטים שלה.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> דף הבית </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> מוצרים </a> <ul> <li> <a href="#"> ביגוד </a> <ul> <li> <a href = "#"> נעליים </a> </ li> <li> <a href="#"> מעילים </a> </ li> <li> <a href="#"> מכנסיים </a> < / li> </ ul> </ li> <li> <a href="#"> אלקטרוניקה </a> <ul> <li> <a href="#"> מצלמות </a> </ li> <li> <a href="#"> מחשבים </a> </ li> <li> <a href="#"> טלפונים </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> FLF </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> אוכל </a> </ li> <li> <a href="#"> כלים </ h </ li> <li> <a href="#"> האלוף. כימיה </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> שירותים </a> <ul > <li> <a href="#"> שירות 1 </a> </ li> <li> <a href="#"> שירות 2 </a> </ li> <li> <a href = "#"> שירות 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> חדשות </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> אנשי קשר </ li> </ ul>

אז בואו לסיים את הלחצנים עם הכפתורים. אני משתמש, יצרתי כמה presets, אתה יכול ליצור משלך, במקרה שלי, אני פשוט להעתיק את הקוד הזה ולמקם אותו במקום הרקע שכתבתי לפני.

.dws-menu> ul li a התצוגה: block; / * קישור קבוע - גרדיאנט זה: http://colorzilla.com/gradient-editor/#c9c9c9+0ff6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * דפדפנים ישנים * / background: -Moz-linear-gradient (למעלה, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (למעלה, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: שיפוע לינארי (לתחתית, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = 'c9c9c9', endColorstr = '757577', GradientType = 0); / * IE6-9 * / ריפוד: 15px 30px 15px 40px; font-size: 14px; צבע: # 454547; text-decoration: none; טקסט-המרה: אותיות רישיות; המעבר: כל הקלות 0.3; } .dws-menu li a: hover {/ * קישור קבוע - גרדיאנט זה: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; * * דפדפנים ישנים * / background: -Moz-linear-gradient (למעלה, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (למעלה, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: שיפוע לינארי (לתחתית, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / מסנן: progid: DXImageTransform.Micro.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px black; המעבר: כל הקלות 0.3; }

אם תרצה, תפריט זה יכול להיות מעוצב עבור הסגנון שאנו מתאימים לך באתר, זה מספיק רק כדי ליצור צבע ולהחליף אותו בקוד. התברר תפריט פשוט אופקית יפה באותו זמן, עשוי CSS טהור.

השאירו תגובה:

Карта