1 Тема від Tar Востаннє редагувалося Tar (16.09.2017 13:25:51)

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Тема: Чи можна використовувати таке меню (цікавить критика!)

Початківець, намагався сам написати простеньке меню щоб використовувати його в майбутньому як заготовку.Цікавить думка більш досвідченних колег, чи можна даний код в принципі використовувати.Можливо там помилок вагон з причепом ? ( писав виключно для себе ,мав намір попрактикуватись).
Буду вдячний за критику!

https://github.com/Taras19/My_menu
https://taras19.github.io/My_menu/
Не зміг зробити плавну прокрутку без jQuery можливо хтось підскаже як плавну прокрутку реалізувати без jQuery

Подякували: 0xDADA11C7, LoganRoss, 221VOLT3

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: Чи можна використовувати таке меню (цікавить критика!)

код не дивився, але помітив проблєму
коли виділений Home, і жмякаєш на інший елемент, то менюшка блимає, і так само, коли з інших елементів переходиш на Home.
А ще, коли крутиш до низу, то News не підсвічується

Подякували: 0xDADA11C7, Tar2

3 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

-менюшка блимає факт( переходить з position:static в fixed ) можливо варто зробити меню фіксованим 
і проблема з блиманням пропаде(надіюсь)
-при прокручуванні сторінки News підсвідчується але проблема таки є, підсвітка пункту не завжди спрацьовує адекватно

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: Чи можна використовувати таке меню (цікавить критика!)

Tar написав:

-менюшка блимає факт( переходить з position:static в fixed ) можливо варто зробити меню фіксованим 
і проблема з блиманням пропаде(надіюсь)
-при прокручуванні сторінки News підсвідчується але проблема таки є, підсвітка пункту не завжди спрацьовує адекватно

воно переходить в fixed після завеликого прокручування, так що так, fixed мона робити
а News підсвічується дуже швиденько, і перестає, бо найнижчий блок активується як тільки декілька пікселів News виходять за верхній край

Подякували: Tar1

5 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

Намагався боротись з блиманням меню зменшенням величини scrollTop при якому меню переходить з static на fixed зменшив з 50 до 10px але меню блимає всеодно.Вирішив наступним чином зробив nav зразу position:fixed тепер блимання не має.

Подякували: FakiNyan, 0xDADA11C72

6 Відповідь від Master_Sergius

  • Дата реєстрації: 01.10.2014
  • Повідомлень: 1 068
    • Репутація: 805

Re: Чи можна використовувати таке меню (цікавить критика!)

А Я вирішив подивитися код... Я й так той веб не люблю, а тут все в одному файлі - і купа стилів і жабаскрипт, і стало мені недобре та й закрив. Не треба так робити.

Подякували: ping, Tar2

7 Відповідь від ping Востаннє редагувалося ping (12.09.2017 21:55:07)

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Чи можна використовувати таке меню (цікавить критика!)

запустив таки і глянув.
1.не зрозуміло принцип поділу progress-line

2.а як це сталося:
  http://imgur.com/GKLICzll.png

3. чомусь по різному веде себе в firefox vs chrome
в хромі   не прокручується сторінка до натисненого анчора.


p.s.
дуже боюся фронтенду, тому стараюся використовувати фреймворки.
тим більше - що на них завжди можна подивитися - а як це зроблено.
рекомендую глянути найпростіший, який знайшов - Skeleton
там і меню випадаюче є - може щось підглянете

http://getskeleton.com/

Is Skeleton for you?

You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).

Подякували: FakiNyan, 0xDADA11C7, Tar3

8 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: Чи можна використовувати таке меню (цікавить критика!)

Я скелетона в книжці по css бачив, там невеличкий туторіал був.
Так-то в тому, що пан зробив, нічого страшного нема, я можу те зробити на css та ванільному js.
Бо по хвакту там лишень блоки один на одному, без розтягування, без якогось замудрого лейауту. Єдине, що виділяється, то це підсвітка розділу, цибання до них, і ось той прогрес бар зверху, але то легко робиться...

Подякували: 0xDADA11C7, Tar2

9 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 720
    • Репутація: 1876

Re: Чи можна використовувати таке меню (цікавить критика!)

Tar написав:

Початківець, намагався сам написати простеньке меню щоб використовувати його в майбутньому як заготовку.Цікавить думка більш досвідченних колег, чи можна даний код в принципі використовувати.Можливо там помилок вагон з причепом ? ( писав виключно для себе ,мав намір попрактикуватись).
Буду вдячний за критику!

https://github.com/Taras19/My_menu
Не зміг зробити плавну прокрутку без jQuery можливо хтось підскаже як плавну прокрутку реалізувати без jQuery

http://web.archive.org/web/201402131059 … JavaScript

Подякували: Tar, leofun012

221VOLT вебсайт

10 Відповідь від fed_lviv Востаннє редагувалося fed_lviv (13.09.2017 15:42:36)

  • fed_lviv
  • fed_lviv
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 11.09.2013
  • Повідомлень: 811
    • Репутація: 664

Re: Чи можна використовувати таке меню (цікавить критика!)

Tar написав:

Не зміг зробити плавну прокрутку без jQuery можливо хтось підскаже як плавну прокрутку реалізувати без jQuery

Код ваш не дивився, але на чистому JS плавну прокурутку легко можна зробити за допомогою requestAnimationFrame(), почитайте + якщо знадобиться поліфіл (https://gist.github.com/paulirish/1579671)

Подякували: Tar, 221VOLT, leofun013

11 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

ping написав:

запустив таки і глянув.
1.не зрозуміло принцип поділу progress-line

2.а як це сталося:
  http://imgur.com/GKLICzll.png

3. чомусь по різному веде себе в firefox vs chrome
в хромі   не прокручується сторінка до натисненого анчора.


p.s.
дуже боюся фронтенду, тому стараюся використовувати фреймворки.
тим більше - що на них завжди можна подивитися - а як це зроблено.
рекомендую глянути найпростіший, який знайшов - Skeleton
там і меню випадаюче є - може щось підглянете

http://getskeleton.com/

Is Skeleton for you?

You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).

- з progress-bar не знав як правильно зробити ,вирішив зробити так
максимально можлива прокрутка=висота документу-висоту вікна
progressBarIn.style.width = scrollTop /(максимально можлива прокрутка/100)+"%";

- для зручності зробив блоки з текстом фіксованої висоти

- firefox vs chrome вмене працює однаково можливо я щось неправильно зрозумів
- я розумію що існує безліч готових рішень більш функціональних та значно краще оформленних хочеться спробувати самому для практики спробувати щось написати

Подякували: 221VOLT, 0xDADA11C7, ping, FakiNyan4

12 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Чи можна використовувати таке меню (цікавить критика!)

Tar написав:

- firefox vs chrome вмене працює однаково можливо я щось неправильно зрозумів

і у мене вже працює однаково.
може я якимось плагіном порушив роботу скрипта.

Подякували: Tar1

13 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

Змінив частину коду,який відповідав за зміну активного пункту в меню при прокрутці сторінки.Старий варіант мені не подобався тим що кожному блоку було потрібно прописувати окрему умову(додав ще один блок з текстом і прописуй умову і так кожен раз).Тепер блок додав звичайно в меню потрібно додати ще один пункт меню а в js змін робити уже не потрібно.Відмовився від висоти блоку а відштовхуюсь від координат відносно вікна.

14 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

Зробив невеликі зміни:
- пробував реалізувати плавну прокрутку за допомогою requestAnimationFrame();
- спробував зробити видимість порядку що б в тій каші можна було щось розібрати;
- трохи змінив принцип зміни активних пунктів меню при прокручуванні сторінки;
Цікавить ваша думка на рахунок правильності написання плавної прокрутки ( спочатку спробував з
setInterval() потім почитав трохи про requestAnimationFrame() і все таки переробив на requestAnimationFrame() ),
і також принцип роботи scroll-bar

/* зміна scroll-bar*/
    var progressBarIn = document.querySelector(".progress-bar__in");
    progressBarIn.style.width = scrollTop / ((documentHeight - windowHeight)  / 100)+ "%";

він працює але є сумніви що працює коректно(викручувався як міг а все таки як правильно?)

Подякували: 221VOLT1

15 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

- При зміні орієнтації екрану напевно змінюється висота документу,тому оновлюю scroll-bar.(раніше він оновлювався тільки при прокручуванні сторінки )
- При клацані по активному пункту в меню(коли меню закрите) меню відкривалось вирішив заміною toggle на remove тепер меню відкривається тільки калацанням по відповідній іконці

document.querySelector(".menu").classList.remove("responsiv");

16 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: Чи можна використовувати таке меню (цікавить критика!)

з toggle має бути можливість зробити те саме, якщо передати false як другий, чи який там, аргумент. Чи такого нема?

Подякували: Tar, ping2

17 Відповідь від Tar

  • Tar
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 27.01.2017
  • Повідомлень: 58
    • Репутація: 44

Re: Чи можна використовувати таке меню (цікавить критика!)

FakiNyan написав:

з toggle має бути можливість зробити те саме, якщо передати false як другий, чи який там, аргумент. Чи такого нема?

Так дійсно є така можливість, буду знати на майбутнє, дякую!

Element.classList.toggle( class [, force])

force - не обов'язково вказувати. Логічне значення true або false яке вказує точну подію: чи видаляти чи додавати клас. Якщо true додає клас, false видаляє.

Подякували: FakiNyan1