• onze lijst bevat één link:
• Thuis
• Nieuws
• Contacten

Over ons

#navbar (marge: 0; opvulling: 0; lijststijltype: geen; breedte: 100px; )

Nu is het tijd om de links zelf te stylen. Wij zullen ze toevoegen achtergrondkleur, wijzig de tekstparameters: kleur, lettergrootte en -dikte, verwijder de onderstreping, voeg kleine streepjes toe en herdefinieer de weergave element van inline naar blok. Bovendien zijn linker- en onderframes toegevoegd aan de lijstitems.

Wanneer u met uw muis over een menu-item beweegt, wordt het verschijning kan veranderen om de aandacht van de gebruiker te trekken. Je kunt een dergelijk effect creëren met behulp van de pseudo-class:hover.

Laten we terugkeren naar het eerder besproken voorbeeld van een verticaal menu en dit toevoegen aan het stijlblad volgende regel:

#navbar a:hover ( achtergrondkleur: #666; rand links: 5px effen #3333FF; ) Probeer »

Horizontaal menu

In het vorige voorbeeld keken we naar de verticale navigatiebalk, die meestal te vinden is op websites links of rechts van het hoofdinhoudsgebied. Menu's met navigatielinks bevinden zich echter ook vaak horizontaal bovenaan de webpagina.

Een horizontaal menu kan worden gemaakt door een gewone lijst op te maken. Eigenschap voor elementen weergeven

Om menu-items horizontaal te plaatsen, moet u eerst een menu maken lijst met opsommingstekens met koppelingen:

• onze lijst bevat één link:
• Thuis
• Nieuws
• Contacten

Laten we een paar regels voor onze lijst schrijven die de standaardstijl die voor lijsten wordt gebruikt opnieuw instellen, en de lijstitems opnieuw definiëren van blok naar inline:

#navbar (marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar li (weergave: inline; ) Probeer »

Nu moeten we het alleen nog bepalen styling voor onze horizontale menukaart:

#navbar (marge: 0; opvulling: 0; lijststijltype: geen; rand: 2px effen #0066FF; randradius: 20px 5px; breedte: 550px; tekstuitlijning: midden; achtergrondkleur: #33ADFF; ) #navbar a ( kleur: #fff; opvulling: 5px 10px; tekstdecoratie: geen; lettertypegewicht: vet; weergave: inline-block; breedte: 100px; ) #navbar a:hover ( randradius: 20px 5px ; achtergrondkleur: #0066FF ) Probeer »

Vervolgkeuzemenu

Het menu dat we gaan maken heeft hoofdnavigatielinks in de horizontale navigatiebalk, en subitems die alleen verschijnen als u de muisaanwijzer op het menu-item plaatst waarop deze subitems betrekking hebben.

Eerst moeten we de HTML-structuur van ons menu maken. We plaatsen de belangrijkste navigatielinks in een lijst met opsommingstekens:

• onze lijst bevat één link:
• Thuis
• Nieuws
• Contacten

We plaatsen de subitems in een aparte lijst en nesten deze in het element

• onze lijst bevat één link:
• Thuis
• Contacten
  • Adres
  • Telefoon
  • E-mail
• Contacten

Laten we nu beginnen met het schrijven van CSS-code. Eerst moet u de lijst met subitems verbergen met behulp van de weergave: geen; zodat ze niet altijd op de webpagina worden weergegeven. Om subitems weer te geven, hebben we dat nodig als we over een element bewegen

#navbar ul (weergave: geen; ) #navbar li:hover ul (weergave: blok; )

We verwijderen de standaardinspringingen en markeringen uit beide lijsten. We maken lijstelementen met zwevende navigatielinks, die zich vormen horizontale menukaart, maar voor lijstelementen die subitems bevatten, stellen we float: none; zodat ze onder elkaar verschijnen.

#navbar, #navbar ul ( marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar li ( zwevend: links; ) #navbar ul li ( zwevend: geen; )

Vervolgens moeten we ervoor zorgen dat ons vervolgkeuzemenu de inhoud onder de navigatiebalk niet naar beneden duwt. Om dit te doen, zullen we de positie van de lijstitems instellen: relatief; , en een lijst met subitems positie: absoluut; en voeg een topeigenschap toe met een waarde van 100%, zodat het absoluut gepositioneerde submenu precies onder de link verschijnt.

#navbar ul (weergave: geen; positie: absoluut; bovenaan: 100%; ) #navbar li ( zwevend: links; positie: relatief; ) #navbar ( hoogte: 30px; ) Probeer »

De hoogte voor de bovenliggende lijst is met opzet toegevoegd, omdat browsers zwevende inhoud niet als elementinhoud beschouwen. Zonder hoogte toe te voegen zal onze lijst door de browser worden genegeerd en zal de inhoud die op de lijst volgt rond ons menu lopen.

Nu hoeven we alleen nog maar onze beide lijsten op te maken en het vervolgkeuzemenu is klaar:

#navbar ul ( weergave: geen; achtergrondkleur: #f90; positie: absoluut; bovenaan: 100%; ) #navbar li:hover ul ( weergave: blok; ) #navbar, #navbar ul ( marge: 0; opvulling: 0; lijststijltype: geen; ) #navbar ( hoogte: 30px; achtergrondkleur: #666; opvulling links: 25px; minimale breedte: 470px; ) #navbar li ( zwevend: links; positie: relatief; hoogte: 100%; ) #navbar li a (weergave: blok; opvulling: 6px; breedte: 100px; kleur: #fff; tekstdecoratie: geen; tekstuitlijning: midden; ) #navbar ul li ( float: geen; ) #navbar li:hover ( achtergrondkleur: #f90; ) #navbar ul li:hover ( achtergrondkleur: #666; )

De zogenaamde nutsnavigatie (in vertaling uit het Engels - navigatiewerkbalk) biedt de gebruiker van een internetbron in de regel de mogelijkheid om kleine acties op de site uit te voeren en omvat tools zoals contactformulier, abonnementsformulier, registratie- of inlogformulier, mogelijkheid om de pagina af te drukken, enz.

Al het bovenstaande heeft grote waarde om een ​​interactie-ervaring te creëren die voldoet aan de behoeften van de internetgebruiker en een diepere betrokkenheid bij de interactie met de site. De enige voorwaarde is dat al deze formulieren en panelen op de plek worden geplaatst waar de bezoeker ze verwacht.

Lijst met hulpmiddelen

De tools die beschikbaar zijn voor gebruik op uw website bepalen de vormen en kwaliteit van de interactie tussen bezoekers en uw online bron. De lijst is enorm, maar enkele van de meest voorkomende hulpmiddelen zijn de volgende:

Hoewel de tool Winkelwagen een fundamenteel, bepalend element is van commerciële websites, wordt aanbevolen dat er ook een pictogram voor deze tool in de navigatiewerkbalk wordt geplaatst. Hetzelfde geldt voor een andere veelgebruikte functie, zoals “Zoeken”.

Ondanks het feit dat de meeste tools en functies in dit paneel, zoals hierboven vermeld, van secundaire aard zijn, is hun aanwezigheid in sommige situaties van groot belang voor gebruikers. Omdat ze nog steeds niet de hoofdbelasting dragen, nemen ze visueel niet veel ruimte in beslag, maar hun aanwezigheid is verplicht.

Locatie

Voorheen werden navigatiewerkbalkpictogrammen ingebed in een inhoudsveld, in een zijbalk of in een algemene navigatiebalk geplaatst. IN de afgelopen jaren deze werkbalk is naar rechts geëmigreerd bovenste hoek pagina's. Dankzij deze innovatie is het menu nu altijd zichtbaar en gemakkelijker op te merken. Let op jezelf: zodra we ons op een webbron bevinden die nieuw voor ons is, zoeken we instinctief naar het registratie- of inlogformulier in de rechterbovenhoek.

De werkbalk op de hoofdpagina van de IBM-website bevindt zich in de rechterbovenhoek, in het midden van de pagina (pictogrammen sociale netwerken) en in de voettekst (link Contact opnemen).

Rechterbovenhoek in detail.

In eerste instantie lijkt deze rangschikking van elementen misschien te verwarrend (alle tools zijn verdeeld in 4 blokken), maar houd er rekening mee dat alleen computernerds ze als delen van één geheel beschouwen. Voor de gemiddelde gebruiker verschillen al deze tools van elkaar qua doel en functies, en dus ook in het feit waarin ze zich bevinden verschillende onderdelen site, er is niets ongewoons voor hen.

Groepen kleine instrumenten zijn rood gemarkeerd. De blokken bevinden zich op een indrukwekkende afstand van elkaar, maar deze opstelling is bij de meeste internetgebruikers al bekend.

Sommige organisaties proberen de werkbalk te verbergen achter een hamburgerpictogram (een pictogram dat staat voor drie horizontale lijnen) of een ander interactief element, bijvoorbeeld een draaiend tandwiel.

Het moet gezegd dat deze aanpak moet worden getest en getest verschillende soorten displays. Uw gebruikers realiseren zich misschien niet dat de tool die ze zoeken onder hetzelfde hamburgerpictogram staat. Slecht idee om te negeren basisprincipes ontwerp en elementaire logica, zelfs als grote bedrijven verwaarloos ze.

1. Volledige iconen (en andere grafische illustraties) verklarende tekst. Mensen houden van dergelijke afbeeldingen, maar vaak begrijpen ze de betekenis ervan niet of onthouden ze ze niet goed. Bovendien gebruiken webmasters deze pictogrammen inconsistent.

Vertrouw niet op tooltips, want die zullen voor u niet werken. mobiele apparaten. Gebruik alleen woorden, of woorden en een afbeelding, om ervoor te zorgen dat het symbool beter wordt begrepen en onthouden. De onderzoekers wijzen erop dat bijvoorbeeld een hamburgermenu veel vaker door bezoekers wordt gebruikt als het vergezeld gaat van het onderschrift ‘Menu’ en is omlijnd met een lijn waardoor het lijkt op een interactieve knop.

2. Plaats gereedschappen waar mensen ze verwachten te vinden. Meest bekeken plaatsen: de rechterbovenhoek van de pagina of het gebied voor en na het artikel. Je kunt deze tools ook inbouwen in het algemene menu, in de algemene navigatiebalk, omdat mensen de neiging hebben er goed naar te kijken als ze iets zoeken.

3. Besturingselementen moeten op besturingselementen lijken; u mag ze geen ongebruikelijke namen geven.

5. Zorg ervoor dat u abonnementstools inbouwt. Maak er het beste van eenvoudig proces abonnementen op een auteur of op de blog in het algemeen.

6. Om de gebruikte taal weer te geven, volstaat het om de naam ervan in tekens van het overeenkomstige alfabet aan te geven.

7. Formulieren voor het abonneren op de bron en het inloggen op de site moeten naast elkaar worden geplaatst.

8. De werkbalk moet zichtbaar zijn, zodat u de belangrijkste gereedschappen met een heldere kleur kunt markeren.

Voorbeelden van de indeling van de navigatiewerkbalk:

Navigatiebalk - dit is een van de elementen van de opdrachtinterface van het programma. Het is een soort “inhoudsopgave” van een sectie of hulpvenster (Fig. 1.9). Hiermee kunt u bepaalde informatie in een sectie of in een hulpvenster bekijken.

De navigatiebalk bevat navigatieopdrachten, dat wil zeggen opdrachten die de gegevens niet wijzigen, maar waar u alleen naartoe kunt gaan noodzakelijke informatie. In de regel zijn dit opdrachten om naar bepaalde lijsten te gaan. Wanneer een dergelijk commando wordt aangeroepen, wordt de bijbehorende lijst weergegeven in het werkgebied, ter vervanging van de vorige inhoud van het werkgebied.

Bijvoorbeeld als gevolg van het aanroepen van de opdracht Magazijnen er wordt een lijst met magazijnen geopend in het werkgebied (Fig. 1.10).

Figuur 1.9 – Navigatiepaneel van de opdrachtinterface van het bureaublad van de beheerde applicatie 1C: Onderneming 8 in modus Configuratie

Figuur 1.10 – Het navigatiecommando oproepen van de commando-interface van het bureaublad van de beheerde applicatie 1C: Onderneming 8

Er zijn situaties waarin het nodig is om verschillende delen van dezelfde lijst te analyseren of te vergelijken, of verschillende lijsten. In dit geval kunt u meerdere lijsten tegelijkertijd openen (Fig. 1.11). Eén bevindt zich in het hoofdvenster en de rest bevindt zich in hulpvensters.

Om de lijst in een hulpvenster te openen, moet u bij het oproepen van een navigatiecommando de toets ingedrukt houden Verschuiving.

Figuur 1.11 – Een navigatiecommando oproepen met het openen van verschillende lijsten van de commando-interface van het bureaublad van de beheerde applicatie 1C: Onderneming 8

De opdrachten in de navigatiebalk zijn meestal in drieën gerangschikt standaard groepen(Afb. 1.12).

De allereerste groep - Belangrijk. De naam ervan wordt niet weergegeven, maar de opdrachten voor deze groep zijn vetgedrukt. Hier zijn opdrachten om naar de informatie te gaan die het vaakst in deze sectie wordt gebruikt.

Tweede groep - Normaal. Deze groep heeft ook geen titel; de opdrachten worden in een normaal lettertype weergegeven.

Derde groep - Zie ook. De opdrachten in deze groep worden voorafgegaan door het kopje Zie ook en zijn niet vereist voor het werken in deze sectie. Maar ze kunnen nuttig zijn.

Figuur 1.12 – Een navigatiecommando oproepen met het openen van verschillende lijsten van de commando-interface van het bureaublad van de beheerde applicatie 1C: Onderneming 8

Naast standaardgroepen kan het navigatiepaneel ook groepen bevatten die door de ontwikkelaar zijn gemaakt.

In een teamgroep Normaal Er kunnen aanvullende groepen opdrachten bestaan. Dergelijke groepen hebben kopjes en de daarin opgenomen commando's worden vanaf de linkerrand ingesprongen weergegeven (Fig. 1.13). Door op de kopjes van deze groepen te klikken, kunnen opdrachten worden verborgen of weergegeven.

Als programmaonderdelen worden gevormd door subsystemen van het eerste niveau, dan worden groepen commando's in de navigatiebalk gevormd door subsystemen van het tweede of meer lage niveaus(Afb. 1.14).

Meestal is het aantal teams in groepen gerangschikt Belangrijk En Zie ook- niet veel. Terwijl je in de groep bent Basisprincipes er kan een behoorlijk groot aantal opdrachten zijn. Daarom wordt een extra groepering van deze teams gebruikt, waardoor het gemakkelijker wordt om door hun samenstelling te navigeren.

Figuur 1.13 – Extra groepen commando's in de commando-interface van de beheerde applicatie Desktop 1C: Onderneming 8

Figuur 1.14 – Correspondentie tussen opdrachtgroepen en de opdrachtinterface van het bureaublad van de beheerde applicatie 1C: Onderneming 8

De gebruiker heeft de mogelijkheid om de samenstelling van de navigatiebalk aan te passen: opdrachten toevoegen of verwijderen, de volgorde wijzigen. Het kan bijvoorbeeld groepen opdrachten verwijderen Kenmerken En Prijzen, en het team Saldo aanpassingen naar groep verplaatsen Zie ook(Afb. 1.15). Het programma onthoudt automatisch de door de gebruiker gemaakte instellingen en toont de volgende keer de navigatiebalk zoals de gebruiker deze heeft geconfigureerd

Figuur 1.14 – Aangepaste herconfiguratie van de opdrachtinterface van het bureaublad van een beheerde applicatie 1C: Onderneming 8

Hoofdstuk 7: Navigatiebalk

Pamela Roberts

Editie 3.1 ( 2002-09-22 )

De navigatiebalk bevindt zich aan de linkerkant van het Konqueror-venster. U kunt het inschakelen (of uitschakelen als het al is ingeschakeld) via het menu-item Raam->Navigatiebalk weergeven of sleutels F9 .

Dit paneel bevat verschillende tabbladen; Om naar een ervan te gaan, klikt u op het pictogram ervan. Om de navigatiebalk uit te schakelen en alleen de tabbladpictogrammen over te laten, klikt u op het huidige tabbladpictogram.

Bladwijzers

Op dit tabblad wordt een lijst met bladwijzers weergegeven; Om een ​​ervan in het hoofdvenster te openen, klikt u er met de linkermuisknop op.

Op dit tabblad wordt een logboek van uw internetactiviteit weergegeven. Om een ​​van de weergegeven adressen in het hoofdvenster te openen, klikt u er met de linkermuisknop op. Om het in een nieuw venster te openen, klikt u er met de rechtermuisknop op en selecteert u het item in het menu dat verschijnt In een nieuw venster.

Om een ​​adres te verwijderen, klikt u er met de rechtermuisknop op en selecteert u het item in het menu dat verschijnt Element verwijderen. Selecteer om uw browsegeschiedenis te wissen Logboek wissen.

In hetzelfde menu kunt u opgeven in welke volgorde de adressen in het journaal moeten worden weergegeven: alfabetisch of op datum.

Als u het item in hetzelfde menu selecteert Instelling..., verschijnt er een venster waarin u dit kunt opgeven maximale grootte tijdschrift, en ook hoe lang daarna laatste bezoek het adres moet automatisch worden verwijderd. Ook is het mogelijk om nieuwe en oude adressen weer te geven verschillende lettertypen. Als u de modus inschakelt Geavanceerde tips, dan zullen tooltips voor logadressen meer gedetailleerde informatie weergeven.

Op dit tabblad wordt uw thuismap. Houd er rekening mee dat verborgen bestanden(beginnend met een punt) worden niet weergegeven. Om een ​​bestand in het hoofdvenster van Konqueror te openen, klikt u er met de linkermuisknop op. Als u met de rechtermuisknop op een map klikt, kunt u het menu dat verschijnt gebruiken om de map in een nieuw venster of op een nieuw tabblad van het hoofdvenster te openen.

Op dit tabblad wordt een lijst met netwerkverbindingen weergegeven (er kunnen echter ook mappen worden weergegeven). Om een ​​object in het hoofdvenster te openen, klikt u er met de linkermuisknop op. Door er met de rechtermuisknop op te klikken, verschijnt een menu waarin u extra opties krijgt aangeboden.

Mappen weergegeven op het tabblad Netto, worden opgeslagen in de map ~/.kde/share/apps/konqsidebartng/virtual_folders/remote/. Daarin hebben gecreëerd nieuwe catalogus, die u aan het tabblad toevoegt nieuwe map. Bestanden beschrijven netwerkverbindingen, hebben de extensie .desktop; creëren nieuw bestand, gebruik het menu-item Creëren->Link naar internetadres....

De hoofdmap is het startpunt bestandssysteem; het slaat alle andere bestanden en mappen op. Het pad naar de hoofdmap wordt aangegeven met een schuine streep: /. Wanneer u het uitvouwt, ziet u met name de hoofdmap, waar de bestanden zijn opgeslagen systeembeheerder en home , waar u uw thuismap kunt vinden.

Dit tabblad biedt toegang tot de volgende hulpmiddelen:

Audio-cd-browser.

Apparaten. Hier is een lijst met uw beschikbare harde schijven(en hun partities), diskettestations en cd-rom-stations. Om een ​​apparaat aan te sluiten en de inhoud ervan in het hoofdvenster weer te geven, klikt u er met de linkermuisknop op. Om een ​​apparaat uit te schakelen, klikt u er met de rechtermuisknop op en selecteert u het item in het menu dat verschijnt. Uitzetten.

Netwerkverkenner Hiermee kunt u de schijven van andere computers op het lokale netwerk bekijken.

Systeembrowser afdrukken biedt toegang tot de KDE-afdrukmanager, Kprinter.

U kunt het uiterlijk van de navigatiebalk als volgt aanpassen: klik met de rechtermuisknop op vrije ruimte onder het onderste tabblad of klik op het pictogram Instelknop(op de foto hierboven - het meest bovenste knop; Afhankelijk van de configuratie is deze knop mogelijk niet beschikbaar.) Er verschijnt een menu met de volgende opties:

Toevoegen

Met dit item kunt u nog een tabblad aan het navigatiepaneel toevoegen. Het zou kunnen Spelerpaneel(een van de Konqueror-add-ons) of een willekeurige map.

Met dit item kunt u de navigatiebalk splitsen, zodat u twee tabbladen tegelijkertijd kunt zien.

Met dit item kunt u opgeven aan welke kant van het paneel de tabbladpictogrammen worden weergegeven.

Met dit item kunt u opgeven of u wilt weergeven Knop Instellingen.

Als u met de rechtermuisknop op een tabbladpictogram klikt, verschijnt een menu met de volgende opties.