Navigation for a mobile on my website


1
Здравейте колеги :) Ако може да укажете малко помощ върху нещо .. което от доста време се мъча и не мога да направя, както трябва.
Започнах един сайт .. успях да направя сайта responsive .. нооо имам проблем с навигацията. Искаше ми се да я направя .. нещо като във фейсбук примерно (защото има и падащи менюта). Това което използвах е това: http://www.hongkiat.com/blog/responsive-web-nav/ Което върши работа .. взимаш наготово кода .. и да не разбираш какво става .. Да обаче този код не работи добре при drop-down менюто. Поглеждах разни обяснения на проблема .. но без JavaScript е малко тегаво да ги разбера .. После реших да пробвам с Bootstrap, там пък нещо съвсем се оплетох. Ако някой успее да помогне, ще съм много благодарна.
PS. Тъй като курсовете по JavaScript ми доидоха малко трудни .. не съм ги минавала. Реших че може би ще може и без JavaScript и реших да последвам това което казва Наков в семинара за намиране на работа в ИТ индустрията - да предложим да направим сайт на някого.. за да можем да показваме реални проекти, когато кандидатстваме за работа .. аз реших да пробвам, което обаче се указа не толкова лесно .. поне вече ще знам де :D

в HTML/CSS от zorica (212 точки)


Отговори



0

Ако знаеш отлично CSS3 и HTML5 имаш шанс за работа, както и шанс да направиш добри сайтове... за съжаление не особено функционални, т.е. просто презентативни. Но се изисква доста работа. За респонсив дизайн ти трябва основно CSS. Гледай лекциите за респонсив и за Slice and Dice .

С тази професия идват и странични умения, които за някои компании са a must have, за други препоръчителни, но във всеки случай е добре да им обърнеш внимание - Photoshop, JQuery (сигурно не си стигнала до него, но с него се работи много по-лесно отколкото с JavaScript).

А конкретно за въпроса ти: Този snippet използва JQuery и css3. А това е целият JQuery код:

$(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

В началото това са селектори на елементите от DOM -> "pull" линка Menu (който е скрит с CSS и се показва само при определени размери на прозореца) и цялата навигация (menu). $(pull).on('click'... е event при клик на линка Menu и се използва JQuery функцията slideToggle() за анимирането на "слайда". Следващото е event за проверка дали широчината на прозореца е по-голям от 320Px и т.н.
 

Най-добре отдели 1-2 седмици само на това да гледаш лекции за тези неща и да изпълняваш tutorials стъпка по стъпка и чак после пробвай сама да правиш разни неща. С прости методи в днешно време се правят добри неща, но трябва да ги разбираш.

P.S. Bootstrap е за хора, чието основно занимание не е фронт енд дизайна, затова ти препоръчвам да не се задълбаваш в него.


от Galya (786 точки)


0
Благодаря за отговора колега :) Аз съм го минавала този курс .. знам как да направя менюто .. но имам проблем с dropdown-ите .. а и този JavaScript май не помага .. На мен това ми беше въпроса .. какво трябва да се направи за да се появяват

от zorica (212 точки)

0
Ами, без кода ти е просто гадаене.

от Galya (786 точки)


0
Ето тук качих част от кода, включила съм само навигацията ..
https://github.com/zorica8doneva/slice-and-dice
Не разбирам .. падащите менюта аз ли трябва да направя нещо в CSS-а или JavaScript-a си върши работата? и този код за скрипта достатъчен ли е .. трябва ли да се добави нещо .. искам просто на падащите менюта при кликане на li, който има свое
    да излиза отдолу 2-то падащо меню.

от zorica (212 точки)