Navigation menu

ΠžΠ±Π·ΠΎΡ€

Navigation menu (Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню) ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ основным, Ρ‚Π°ΠΊ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ (Π² случаС ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ) срСдством Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’ случаС ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΠ°Ρ€Π΅ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ Header ΠΈ вызываСтся ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²Ρ‹Π·ΠΎΠ²Π° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню. Π Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΠΎΠ΅ Navigation menu Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю высоту ΠΎΠΊΠ½Π° прилоТСния ΠΈ находится Π² Π»Π΅Π²ΠΎΠΉ Π΅Π³ΠΎ части.

НаполнСниС Navigation menu ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ слоТности Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ структуры, нахоТдСния систСмы Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅, нСобходимости Π² модулях ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π°Ρ…. Однако Π²Π°Ρ€ΠΈΠ°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ наполнСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΠ΄Ρ‡ΠΈΠ½ΡΡ‚ΡŒΡΡ Π΅Π΅ логичСской структурС.

Анатомия

НавигационноС мСню состоит ΠΈΠ·:

  1. Logo. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ - вСсти Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу прилоТСния

  2. Modules zone. Аналог Π·ΠΎΠ½Ρ‹ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π² шапкС

  3. Navigation settings. Настройки отобраТСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ Ρ‚.ΠΏ.

  4. Search. ΠžΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ΅Ρ‚ поиск ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ ΠΈ страницам

  5. Navigation zone. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ прилоТСния.

  6. Support. Π’Π΅Ρ…ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° - ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вынСсСн Π² ниТнюю Ρ‡Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню Π² связи с Ρ€Π΅Π΄ΠΊΠΈΠΌ использованиСм.

  7. Fix-menu. Ѐункция фиксации мСню Π½Π° экранС (для мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈΠ· шапки прилоТСния).

Π—ΠΎΠ½Π° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ прСдставляСт собой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ структуру прилоТСния (иСрархичСский список) ΠΈ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΡΠΎΠ²Π΅ΡˆΠ°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами систСмы.

Π Π°Π·Π΄Π΅Π»Ρ‹

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ систСмы ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ Π² Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Π° Ρ€Π°Π·Π΄Π΅Π»Ρ‹ - Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹.

ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ 3 ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ влоТСнности:

  1. Π Π°Π·Π΄Π΅Π» 1 уровня

a. Π Π°Π·Π΄Π΅Π» 2 уровня

i. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°

Π Π°Π·Π΄Π΅Π» - это логичСская Π³Ρ€ΡƒΠΏΠΏΠ° страниц ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², которая сама ΠΏΠΎ сСбС ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ²Π»ΡΡ‚ΡŒΡΡ ссылкой Π½Π° ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ страницу. Π Π°Π·Π΄Π΅Π» ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ-ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Π²ΠΈΠ΄Π΅ ΡˆΠ΅Π²Ρ€ΠΎΠ½Π°, ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ раскрываСтся список Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… страниц ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ².

Π Π°Π·ΠΌΠ΅Ρ€ ΠΈ располоТСниС

НавигационноС мСню Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю высоту экрана (- высота Header).

Бтандартная ΡˆΠΈΡ€ΠΈΠ½Π° - 320Ρ€Ρ…. ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ потрСбности ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° (ΠΊΡ€Π°Ρ‚Π½ΠΎΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 8Ρ€Ρ…).

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ мСню появляСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Ρ‹Π·ΠΎΠ² мСню происходит ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅-Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡƒ, располоТСнному Π² шапкС:

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню

ЗафиксированноС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню Π½Π° экранС. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС контСнтная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ экрана ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ.

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· элСмСнтов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ списка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½:

  • Icons. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ описания контСкста Ρ€Π°Π·Π΄Π΅Π»Π° ΠΈΠ»ΠΈ страницы.

  • Indicator ΠΈ Counter. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для сообщСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ сообщСний ΠΈ событий Π½Π° страницС ΠΈΠ»ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π΅. ЦвСтовая индикация - стандартная для нашСй Π”Π‘.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ для Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², Π½Π° страницах ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ счСтчики. Π’ случаС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π²ΠΈΠ΄ΠΎΠ² ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π½Π° страницах - для Ρ€Π°Π·Π΄Π΅Π»Π° наслСдуСтся самый ΠΊΡ€ΠΈΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€.

Π¦Π²Π΅Ρ‚

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 2 Ρ†Π²Π΅Ρ‚Π° для элСмСнтов списка. Π‘Π°ΠΌΡ‹ΠΉ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ - для самого Π½ΠΈΠΆΠ½Π΅Π³ΠΎ уровня ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ.

Last updated

Was this helpful?