/* menu */ .nav ( marge: 20px 0; ) .nav ul ( marge: 0; opvulling: 0; ) .nav li ( marge: 0 5px 10px 0; opvulling: 0; lijststijl: geen; weergave: inline-block; *display:inline; /* ie7 */ ) .nav a ( opvulling: 3px 12px; tekstdecoratie: geen; kleur: #999; regelhoogte: 100%; ) .nav a:hover ( kleur : #000; ) .nav .current a (achtergrond: #999; kleur: #fff; randradius: 3px; )

De secties .nav a:hover en .nav .current a zijn verantwoordelijk voor het wijzigen van respectievelijk de kleur van links en de achtergrond van actieve/huidige menu-items. Ik heb niet geprobeerd al te slim te zijn in dit voorbeeld, ik deed alles in de geest van minimalisme, als je over de link beweegt, verandert de kleur, de tekst wordt zwart: #000; , en voor actieve items heb ik achtergrond toegevoegd: #999; , de letterkleur vervangen door witte kleur: #fff; en rond de randen een kleine randradius af: 3px; op de resulterende knop. Je kunt hierin naar hartelust fantaseren en experimenteren.

Zoals ik hierboven al zei, kunnen we de uitlijning van navigatie-items wijzigen met behulp van eigenschappen voor tekstuitlijning Om dit te doen, voegt u een paar regels toe aan de CSS-code:

/* menu aan de rechterkant */ .nav.right ul ( tekst-uitlijning: rechts; ) /* menu in het midden */ .nav.center ul ( tekst-uitlijning: midden; )

Het plezier begint. Onze menukaart staat op in dit stadium Het heeft een rubberformaat (de breedte wordt bepaald als een percentage) en is nog helemaal niet adaptief. Begin met het vergroten of verkleinen van het scherm en je zult zien dat het menu is ingebouwd in een chaotische wirwar van knoppen.

We zullen de situatie corrigeren met behulp van mediaquery's. Stel op het toepassingspunt van de mediaquery op 600px in relatieve positionering positie: relatief; voor het nav-element zodat we later de menulijst kunnen plaatsen

bovenaan in absolute positie positie: absoluut; . Met behulp van de eigenschap display: none, zullen we alle li-menu-items verbergen, waardoor alleen de actieve items ingeschakeld blijven huidige moment linkt met de huidige klasse en wijst hen de eigenschap display: block toe
Wanneer u over een gegroepeerde navigatiebalk beweegt, moeten alle menu-items als vervolgkeuzelijst worden weergegeven. Hiervoor definiëren we de regel .nav ul:hover li met de functiecode>display: block . Voor actieve/huidige items voegen we een pictogram toe om ze van de rest te markeren.
Als u het menu naar rechts wilt verplaatsen of wilt centreren, gebruikt u de positioneringseigenschappen links en rechts voor de ul-lijst van ons menu.


@mediascherm en (max-breedte: 600px) (.nav (positie: relatief; min-hoogte: 40px;).nav ul (breedte: 180px; opvulling: 5px 0; positie: absoluut; boven: 0; links: 0 rand: effen 1px #aaa; achtergrond: #FAFAFA url (images/icon-menu.png) no-repeat 10px 11px border-radius: 5px 2px rgba (0, 0, .3) .nav li (weergave: geen; /* alles verbergen punten */ marge : 0 ; ) .nav .current (display: block ; /* toon alleen momenteel actief

items */ ) .nav a ( display : block ; opvulling : 5px 5px 5px 32px ; tekstuitlijning : links ; ) .nav .current a ( achtergrond : geen ; kleur : #666 ; ) /* wanneer u over menu-items zweeft * / .nav ul: hover (achtergrondafbeelding: geen; ) .nav ul: hover li (weergave: blok; marge: 0 0 5px; ) .nav ul: hover current (achtergrond: url (afbeeldingen/icon-check. png ) no-repeat 10px 7px ) /* responsief menu aan de rechterkant */ .nav .right ul (links: auto; rechts: 0; ) /* responsief menu in het midden */ .nav .center ul (links: 50% ; marge-links: -90px );

• @mediascherm en (max-breedte: 600px) ( .nav ( positie: relatief; min-hoogte: 40px; ) .nav ul ( breedte: 180px; opvulling: 5px 0; positie: absoluut; boven: 0; links: 0 ; rand: effen 1px #aaa; achtergrond: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px; randradius: 5px box-shadow: 0 1px 2px rgba(0,0,0,. 3); ) .nav li (weergave: geen; /* alles verbergen
• punten */ marge: 0;

  ) .nav .current (weergave: blok; /* toon alleen momenteel actief

  items */ ) .nav a ( weergave: blok; opvulling: 5px 5px 5px 32px; tekst uitlijnen: links; ) .nav .current a ( achtergrond: geen; kleur: #666; ) /* wanneer u over menu-items zweeft * / .nav ul:hover (achtergrondafbeelding: geen; ) .nav ul:hover li (weergave: blok; marge: 0 0 5px; ) .nav ul:hover .current ( achtergrond: url(images/icon-check. png) no-repeat 10px 7px; ) /* responsief menu aan de rechterkant */ .nav.right ul ( links: auto; rechts: 0; ) /* responsief menu in het midden */ .nav.center ul ( links: 50%; marge-links: -90px;
  Gratis vertaling en aanpassing: Andrey /driver/

  nieuwe speler 16 januari 2017 om 01:28 Mobiel menu voor de site. JQuery mmenu-plug-in
  • jQuery

  In dit artikel zullen we het hebben over hoe je een menu kunt maken voor de mobiele versie van de site dat in het adaptieve ontwerp zou passen. Ik wil je vertellen over een plug-in voor JQuery genaamd mmenu (je kunt de link volgen om de plug-in te downloaden en meteen zien hoe het menu dat we gaan maken eruit zal zien). We zullen de plug-in gebruiken omdat het niet de beste praktijk is om elke keer je eigen fiets te bouwen. Onze manier is om de best practices te gebruiken. Laten we beginnen.

  Verbinding. De auteur adviseert om html 5 doctype te gebruiken, nou, hier denk ik dat we geen alternatieven nodig hebben, we gebruiken het. In het hoofdgedeelte van ons document moeten we JQuery zelf verbinden en twee plug-inbestanden, we verbinden:

  
  Als we een menu op het canvas nodig hebben, moeten we de bestanden jquery.mmenu.oncanvas.min.js en jquery.mmenu.oncanvas.css opnemen. On-canvas is een versie van het menu met position:absolute; breedte:100%; height:100%, waardoor het wordt uitgerekt om het hele scherm te vullen.

  Een menu maken Het menu is heel eenvoudig gemaakt: net als een ongeordende HTML-lijst ondersteunt de plug-in het nesten van lijsten. Dit alles moet worden verpakt in een navigatietag, die een ID heeft.
  • Thuis
  • Over ons
    • Geschiedenis
    • Het team
    • Ons adres
  • Contact
  Menustijlen 1. Als de plug-in een geneste lijst tegenkomt, voegt hij binnen de bovenliggende li-tag een link toe naar de link die al in deze li bestaat. Wanneer u op de toegevoegde link klikt, wordt een submenu geopend. Om van een menu-item een ​​link naar een volledig submenu te maken in plaats van slechts twee links, moet je een span-tag gebruiken.
  • Thuis
  • Over ons
    • Geschiedenis
    • Het team
    • Ons adres
  • Contact
  
  2. Om het submenu altijd zichtbaar te maken, moet u er de klasse “Inset” aan toevoegen.
  3. Voeg de klasse "Geselecteerd" toe aan het menu-item om het gemarkeerd te maken.
  4. U kunt als volgt scheidingstekens maken
  • Website
  • Thuis
  • Over ons
  • Contact
  Javascript Je hebt een knop nodig die, wanneer erop wordt geklikt, een menu opent. Ik raad aan deze hamburgers te gebruiken. Daar leest u hoe u ze kunt gebruiken. Kortom, u moet de hamburgerstijlen downloaden, deze aan de pagina koppelen en ongeveer de volgende html-code toevoegen

  
  Ik heb de klasse Fixed gebruikt om position:fixed in te stellen

  Om ons mobiele menu te laten werken, hoeven we alleen maar het volgende aan te sluiten javascript-code naar pagina:

  $(document).ready(function() ( var $menu = $("#mijn-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("klik", function() ( API.open(); )); API.bind("geopend", function() ( setTimeout(function() ( $icon.addClass ("is-actief"); $icon.on("klik", function() ( API.close(); )); setTimeout(function() ( $icon.removeClass("is-actief") ; , 100); $icon.on("klik", function() (API.open(); ));

  Problemen bij het gebruik van mmenu Ik ben twee problemen tegengekomen. In eerste instantie probeerde ik de hele inhoud van het lichaam erin te wikkelen div-tag, omdat dit nodig is om de plug-in te laten werken. Maar in dit geval verborg het om de een of andere reden alle inhoud die ik had ingepakt. Dus ik gaf het op. Als je niet alles in je lichaam in een div verpakt, dan zal de plug-in het voor je doen. Maar er zullen problemen zijn met het dubbel uitvoeren van js-scripts en andere. Daarna kwam ik meteen het tweede probleem tegen: de plug-in verpakt niets anders dan een div. Dat wil zeggen, als je h1 direct in de body hebt (body > h1), zoals ik bijvoorbeeld had, dan zal mmenu ze overslaan en de div's die erachter staan ​​inpakken. Ik heb dit opgelost door simpelweg alle andere tags in div's te verpakken. zodat er direct in het lichaam alleen divs over zijn.

  Hierdoor werkte alles voor mij. Ik hoop dat dit artikel nuttig voor je was.

  Tags: responsief ontwerp, lay-out, jQuery-plug-ins

• Website-ontwikkeling

Veel mensen proberen al hun website aan te passen voor mobiele apparaten. Ze gebruiken de nieuwe functies van CSS3 zowel op eenvoudige sites als op veel complexere sites. Tijdens het proces doen zich enkele problemen voor, en een van de belangrijkste is het gedrag van het sitemenu wanneer het op kleine schermen wordt bekeken. Beslissen dit probleem, zo bleek, op verschillende manieren. Voor mij is het hetzelfde deze taak is de laatste tijd bijzonder relevant geworden, dus ik houd de materialen op internet hierover in de gaten adaptief ontwerp. En onlangs kwam ik het tegen goede analyse bestaande patronen adaptieve navigatie.

Omdat ik verwant ben aan de open-source adaptieve HTML5-sjabloon Simpliste, heb ik besloten Alle bestaande mogelijkheden werken met navigatie probeer het eens in de praktijk. Maar naast ontvangen eigen ervaring, Ik heb verschillende visuele voorbeelden kunnen maken die door iedereen kunnen worden gebruikt, en een beschrijving van het proces kunnen opstellen, waarmee ik u uitnodig om vertrouwd te raken.


Het artikel zelf, dat mij interesseerde en mij tot actie aanzette, heet Responsive Navigation Patterns. Ik zal erop vertrouwen, en de voorbeelden zullen de pagina's van de Simpliste-sjabloon zijn met de implementatie van patronen en volledige beschrijving hoe je hetzelfde resultaat kunt bereiken.

Er zijn verschillende benaderingen van adaptieve navigatie. Laten we ze in volgorde bekijken.



1. Navigatie bovenaan of alles laten zoals het is. De meest voor de hand liggende en meest gebruikelijke manier. Je moet er alleen voor zorgen dat alles in de breedte van het scherm past en niet uitsteekt. IN HTML-structuur er verandert niets, maar menulinks kunnen enigszins gewijzigde stijlen krijgen. Er zijn verschillende soorten variaties mogelijk met het verschijnen van links, die kunnen worden vereenvoudigd, gecentreerd, vervangen door pictogrammen, of het uiterlijk van interfaces van mobiele apparaten kunnen nabootsen.

Deze aanpak wordt gebruikt in Simplistische thema's.

Voordelen Gemakkelijkst te bereiken. Het is niet nodig om Javascript te gebruiken (of er afhankelijk van te zijn), geen ingewikkelde CSS-manoeuvres vereist. Nadelen Het probleem kan beginnen als het aantal menu-items te groot is. Ten eerste kan de hoogte van het navigatieblok zodanig worden dat het de inhoud van de site op de eerste pagina volledig bedekt en de gebruiker door de site zal moeten “scrollen” om bij de informatie te komen die hij nodig heeft. En dus op elke pagina van de site. In de tweede plaats rijst de vraag menu's met meerdere niveaus. Als ze eenvoudigweg onder elkaar worden opgesteld, keren we terug naar het probleem van de hoogte van het navigatieblok. Ten derde, als niet alles van tevoren is voorzien, kan het toevoegen van nieuwe menu-items onaangename "verhuizingen" en overdrachten veroorzaken.



2. Link naar voettekst, naar navigatiedemo met volledige beschrijving.

Deze methode is niet zo gebruikelijk. De essentie ervan is dat er een link in de header wordt gemaakt, die brede monitoren is verborgen en wordt, indien nodig, weergegeven aan mobiele apparaten. Deze ankerlink leidt naar het menu, dat zich in de voettekst van de site bevindt. In dit geval wordt het menu zelf gepositioneerd met behulp van CSS, of gedupliceerd in de kop- en voettekst, waarna het menu in de koptekst verborgen is bij lage resoluties. U kunt tekst of een duidelijk pictogram als link gebruiken.

Voordelen blijven de enige schakel in een header die heel weinig ruimte in beslag neemt. Er is geen afhankelijkheid van scripts. Nadelen U zult extra CSS-code moeten toevoegen om het menu van de voettekst naar boven te verplaatsen desktopcomputers(met behulp van position:absolute of position:fixed), of verberg het menu in de koptekst op mobiele apparaten als het het voettekstmenu dupliceert. Bovendien kan het gevoel van een scherpe "sprong" bij het navigeren door een dergelijke link de gebruiker verrassen.



3. Dropdownlijst() in plaats van navigatieDemo met volledige beschrijving.

Deze aanpak wordt steeds gebruikelijker. Het maakt gebruik van Javascript, dat alle menu-items “doorloopt” en er een lijst van maakt. Dat wil zeggen dat de navigatie het ondersteunde interface-element zal zijn besturingssysteem bezoeker.

Het proces van het schrijven van een script voor zo'n menu werd uitgebreid beschreven in een artikel op Smashing Magazine. Maar je kunt een kant-en-klare jQuery-plug-in gebruiken, zoals ik deed in mijn eigen oplossing.

Voordelen Strijkt compact. Herkenbaar als navigatie-element en vertrouwd voor de gebruiker. Voor sites met complexe navigatie en geneste menu's kan dit een uitstekende oplossing zijn. Nadelen Het zal moeilijk zijn om een ​​mobiel OS-interface-element er uit te laten zien zoals jij dat wilt. Op verschillende apparaten uiterlijk en gedrag zullen iets anders zijn. JavaScript-afhankelijkheid. Echt lastig om te navigeren grote maten, wanneer alle punten in een lange, monotone rij zijn opgesteld, hoewel de nesting van niveaus behouden blijft.



4. VervolgkeuzemenuDemo met volledige beschrijving.

Deze aanpak is ook behoorlijk populair. Vooral gezien de mogelijkheid om te experimenteren met design. De essentie ervan is dat in de mobiele versie het menu verborgen is, maar er blijft een link of knop bestaan, door erop te klikken kun je de navigatie openen. Alles werkt mee met behulp van Javascript. Je kunt de aanpak vergelijken met een voettekstlink, maar dan in in dit geval het menu verschijnt op dezelfde plaats waar de gebruiker op de knop heeft geklikt, dat wil zeggen bovenaan de pagina. Als alternatief kunt u een paar van de belangrijkste links achterlaten en de rest uitvouwen als u op de knop klikt.

Voordelen U kunt er uitzien zoals u wilt. De gebruiker wordt nergens naartoe overgebracht. Voor geneste menu's is het mogelijk om hiërarchieën te creëren die uitvouwen wanneer erop wordt geklikt. Nadelen Afhankelijkheid van Javascript. Mogelijke problemen met prestaties als u het menu moet animeren.



5. Schuifmenu met inhoudsverschuiving Demo met volledige beschrijving.

Deze optie is beschreven als een aparte aanpak. Maar het is eigenlijk meer een variatie op een vervolgkeuzemenu. De essentie ervan is dat wanneer u op een link of knop klikt, het menu niet alleen wordt geopend, maar ook vanaf de rand van het browservenster naar buiten beweegt, waardoor de inhoud buiten het venster wordt verplaatst.

Het was niet mogelijk om een ​​kant-en-klare oplossing te vinden, dus hebben we onze eigen oplossing bedacht.

$(function())( $("body").addClass("js"); $(".link_nav").click(function())( $("body").toggleClass("mobile_nav"); )) ))

Eigenlijk niet veel scripts.

Het belangrijkste werk wordt gedaan door CSS. Bij het wijzigen van de klasse van de body-tag menupositie verandert, die wordt gepositioneerd met behulp van position:fix, en de inhoud wordt opgehaald extra vulling links, die plaats maakt voor het menu. In Webkit-browsers was het zelfs mogelijk om animatie te realiseren via CSS-overgangen, dat wil zeggen dat op iPhones en Androids het menu effectief zal worden verplaatst. Nogmaals, je kunt de nodige stijlen bekijken en meenemen