Mi az a CSS navigációs sáv?

A CSS-ben a navigációs sáv, más néven navigációs sáv, amelyet egy felületen használnak, hogy navigációs hivatkozásokat vagy menüket biztosítsanak a különböző választóknak vagy oldalfelhasználóknak a webhelytervezés során. A felhasználók könnyen navigálhatnak a webhely tartalmában, vizuális útmutatóként használva azt.

bináris fa java

A navigációs sáv segítségével javíthatjuk a weboldal megjelenítését, stílusát, valamint tartalmazza a CSS segítségével leírt dizájnt, színeket, betűtípusokat és térközöket is. A CSS-navigációs sávot CSS-tulajdonságokkal és -szabályokkal fejlesztik és alakítják ki, hogy egy adott megjelenést és funkcionalitást hozzanak létre.

A CSS navigációs sáv jellemzői

A navigációs sáv néhány jellemzője a következő:

Elrendezési lehetőségek:A CSS-ben a navigációs sáv elhelyezhető függőlegesen a weboldal széle mentén, vagy vízszintesen a tetején.Linkek a navigációhoz:A menü a webhely különböző oldalaira és szakaszaira mutató hivatkozásokat tartalmaz. Ezek a hivatkozások gyakran gomb-, szöveg- vagy ikonstílusúak.Legördülő menük:A legördülő menük egy másik funkció, amely hozzáadható a navigációs sávokhoz. További hivatkozások vagy opciók jelennek meg, amikor a felhasználó egy menüelem fölé viszi vagy kiválasztja az egérmutatót.Stílus:A CSS segítségével a tervezők módosíthatják a navigációs sáv vizuális elemeit, például a színeket, a betűtípusokat, a szegélyeket és a lebegő effektusokat. Ez elősegíti az egységes és tetszetős dizájn létrehozását, amely beleolvad a webhely általános esztétikájába.Reszponzív dizájn:A modern navigációs sávok gyakran érzékenyen vannak kialakítva, amelyek alkalmazkodnak a különböző képernyőméretekhez és eszközökhöz. A reszponzív dizájn segítségével garantálhatjuk, hogy a navigáció továbbra is vonzó és tetszetős marad asztali és mobil eszközökön.Kölcsönhatás:a CSS segítségével interaktív effektusokat is tudunk hozzáadni a navigációs elemekhez, például a hivatkozás színének megváltoztatását kattintáskor, vagy rámutatva a kiemelési effektust is megjelenítheti.

A CSS navigációs sáv segítségével fokozhatjuk a felhasználói élményt, és egyszerűvé tehetjük a látogatók számára a weboldal tartalmának eligazodását, így a webdesign elengedhetetlen része.

Példa

Vegyünk egy egyszerű példát arra, hogyan hozhatunk létre vízszintes navigációs sávot CSS használatával:

 /* 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> 

Kimenet:

A példa vízszintes navigációs sávjában öt hivatkozás jön létre: 'Főoldal', 'Névjegy', 'Szolgáltatások', 'Portfólió' és 'Kapcsolat'. Az alapvető CSS-tulajdonságokat használtuk a navigációs sáv, a hivatkozások és a lebegtetési effektusok stílusának meghatározásához. Az Ön által előnyben részesített design tükröződhet a színekben, a betűtípusokban, a kitöltésben és más stílusokban.

A CSS navigációs sáv korlátozása

A CSS navigációs sávnak van néhány korlátozása, amelyek közül néhány a következő:

Korlátozott interakciós összetettség:Míg a CSS egyszerű lebegtetési effektusokat és átmeneteket képes létrehozni, a JavaScript-nek bonyolultabb interaktív funkciókat kell megvalósítania, például beágyazott, többszintű legördülő menüket.Böngészők közötti kompatibilitás:A különböző webböngészők eltérően értelmezhetik a CSS-szabályokat, így a navigációs sávok eltérően jelenhetnek meg és viselkedhetnek. Kihívást jelenthet az egységes kialakítás biztosítása minden böngészőben.Reszponzív tervezési kihívások:A különféle képernyőkön és eszközökön jól működő navigációs sáv létrehozása nehéz lehet. Médialekérdezések és további CSS-szabályok gyakran szükségesek a navigációs sáv elrendezésének módosításához a különböző képernyőfelbontásokhoz.Korlátozott animáció:A CSS képes kezelni az alapvető animációkat, de JavaScript- vagy CSS-könyvtárak szükségesek bonyolultabb animációk vagy effektusok létrehozásához, például a sima görgetéshez.Összetett stílus:A navigációs sávok rendkívül egyedi és bonyolult dizájnjainak létrehozása kifinomult CSS-technikákat igényelhet, amelyek frissítése kihívást jelenthet.Kisegítő lehetőségek:Előfordulhat, hogy a teljes egészében CSS-ből készült navigációs sávok nem mindig felelnek meg a képernyőolvasókra és más segítő technológiákra vonatkozó irányelveknek. Különös gondossággal kell eljárni annak érdekében, hogy a navigáció minden felhasználó számára elérhető legyen.

E hátrányok ellenére a CSS navigációs sávok sokoldalúsága és széles körben elterjedt használata a webdesignban továbbra is fennáll. Előfordulhat azonban, hogy ki kell egészíteni őket JavaScript-szel és más technológiákkal a kifinomultabb szolgáltatások és a zökkenőmentes felhasználói élmény érdekében.

Vízszintes navigációs sáv

A vízszintes navigációs sáv a hivatkozások vízszintes listája, amely általában az oldal tetején található.

Nézzük meg, hogyan hozhatunk létre vízszintes navigációs sávot egy példa segítségével.

Példa

Ebben a példában hozzáadjuk a túlcsordulás: rejtett tulajdonság, amely megakadályozza a hogy elemek ne kerüljenek ki a listából, kijelző: blokk tulajdonság blokkelemként jeleníti meg a hivatkozásokat, és kattinthatóvá teszi a teljes hivatkozási területet.

harald baldr

Hozzáadjuk továbbá a balra lebeg tulajdonság, amely a float segítségével a blokkelemeket egymás mellé csúsztatja.

Ha teljes szélességű háttérszínt szeretnénk, akkor hozzá kell adnunk a háttérszín tulajdonát

dobja be a java kivételkezelését

 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> 

Határelválasztók

A navigációs sávban lévő hivatkozások közötti szegélyt a gombbal adhatjuk hozzá határ-jobbra ingatlan. A következő példa érthetőbben magyarázza el.

Példa

 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> 

Javítva a navigációs sávok

Amikor görgetjük az oldalt, a rögzített navigációs sávok az oldal alján vagy tetején maradnak. Lásd ugyanerre a példát.

Példa

 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>