מהו סרגל ניווט CSS?
ב-CSS, סרגל ניווט הוא, הידוע גם כסרגל ניווט המשמש בממשק כדי לספק קישורי ניווט או תפריטים לבוררים שונים או למשתמשי עמודים בעיצוב אתרים. משתמשים יכולים לנווט בקלות בתוכן האתר באמצעותו כמדריך ויזואלי.
1 מתוך 1000.00
בעזרת סרגל ניווט נוכל לשפר את המצגת והסגנון של דף אינטרנט, והוא כולל גם את העיצוב, הצבעים, הגופנים והמרווחים המתוארים באמצעות CSS. סרגל ניווט CSS פותח ומעוצב באמצעות מאפיינים וכללי CSS כדי לייצר מראה ופונקציונליות מסוימים.
מאפיינים של סרגל ניווט CSS
כמה מאפיינים של סרגל הניווט הם כדלקמן:
בעזרת סרגל ניווט CSS, אנו יכולים לשפר את חווית המשתמש ולהקל על המבקרים לנווט בתוכן האתר, כך שהוא חלק מכריע בעיצוב אתרים.
דוגמא
ניקח דוגמה פשוטה כיצד אנו יכולים ליצור סרגל ניווט אופקי באמצעות CSS:
/* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> תְפוּקָה:
חמישה קישורים נוצרים בסרגל הניווט האופקי של דוגמה זו: 'בית', 'אודות', 'שירותים', 'פורטפוליו' ו'צור קשר'. השתמשנו במאפייני CSS בסיסיים כדי לעצב את סרגל הניווט, הקישורים ואפקטי הריחוף. העיצוב המועדף עליך יכול לבוא לידי ביטוי בצבעים, בגופנים, בריפוד ובסגנונות אחרים.
הגבלה של סרגל ניווט CSS
ישנן מספר מגבלות של סרגל הניווט של CSS, וחלקן הן כדלקמן:
למרות החסרונות הללו, הרבגוניות והשימוש הנרחב בסרגלי ניווט CSS בעיצוב אתרים נמשכים. עם זאת, ייתכן שיהיה צורך להשלים אותם עם JavaScript וטכנולוגיות אחרות עבור תכונות מתוחכמות יותר וחווית משתמש חלקה.
סרגל ניווט אופקי
סרגל הניווט האופקי הוא הרשימה האופקית של הקישורים, שנמצאת בדרך כלל בחלק העליון של הדף.
בואו נראה כיצד ליצור סרגל ניווט אופקי באמצעות דוגמה.
דוגמא
בדוגמה זו, אנו מוסיפים את הצפה: נסתר רכוש שמונע את זֶה אלמנטים מיציאה מחוץ לרשימה, בלוק תצוגה מאפיין מציג את הקישורים כרכיבי הבלוק והופך את כל אזור הקישור ללחיצה.
ספרה רומית 1 עד 100
אנחנו מוסיפים גם את לצוף: שמאל property, המשתמשת ב-float כדי לגרום לאלמנטים של הבלוק להחליק אותם זה ליד זה.
אם אנחנו רוצים את צבע הרקע ברוחב מלא אז אנחנו צריכים להוסיף את צבע רקע רכוש ל עדיף מ אֵלֵמֶנט.
הוסף למערך java
ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> מחיצות גבול
נוכל להוסיף את הגבול בין הקישורים בסרגל הניווט על ידי שימוש ב- גבול-ימין תכונה. הדוגמה הבאה מסבירה זאת בצורה ברורה יותר.
דוגמא
ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> סרגלי ניווט קבועים
כאשר אנו גוללים בעמוד, פסי ניווט קבועים נשארים בחלק התחתון או העליון של העמוד. ראה דוגמה לאותו דבר.
דוגמא
ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3> בדוק את זה עכשיו