Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Need help with js for center menu on district website

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 42 total)
1 2 3
  • Author
    Posts
  • January 9, 2015 at 8:25 am #192735
    atjones44
    Participant

    Thanks A bunch

    January 9, 2015 at 3:48 pm #192783
    Shikkediel
    Participant

    Gave the HTML more structure and added/removed a few tags, cleaned up the CSS and made a beginning to the jQuery script :

    School district menu

    Could you give me an idea of how the menu should interact exactly – keep some of the hover effect in place maybe? Otherwise users won’t know which list items have submenus. An arrow to indicate that could also work of course. Cheers.

    January 9, 2015 at 5:30 pm #192791
    atjones44
    Participant

    Yeah on the district site I have added an arrow which indicates on the sub menu which ones have another drop down menu. You can see it live @ http://www.usd430.k12.ks.us

    I like your idea of some hover effect. Maybe on the first items hover can work like normal but on all submenu’s it would require clicks. Let me know what you would think is best!

    Thanks again!

    January 9, 2015 at 6:05 pm #192795
    Shikkediel
    Participant

    I’ll see if I can implement both hover and click on the first item (and only click on the submenus) – that way you can also open the menu on a touch screen. Actually, I’ll be chaining a mousedown-mouseup and touchstart-touchend since it responds a bit quicker than click.

    Only thing is that the menu lists will not disappear automatically then. But maybe I can set a timeout on that or something…
    I’ll get back on it.

    January 9, 2015 at 6:08 pm #192796
    atjones44
    Participant

    Thanks so much for your time and everything.

    January 10, 2015 at 10:35 am #192824
    Shikkediel
    Participant

    No problem at all, glad to help out some school kids.

    It turned out to be a bit more complex than I anticipated on – mostly in respect to the submenus. I think it’s good for user friendliness to keep as much hover action in place as possible but if you implement it on the parent, it will automatically apply to the children as well.

    So I came up with a middle way – hovering fully works but if you go out of the submenu, the main list will not disappear (at all). If you leave the first dropdown level (main list), there is a full second to return to it before it will disappear. That should work for the younger audience?

    Touch support is added (although I cannot test it myself) and clicking or touching the screen anywhere outside the nav menu will hide the lists so any non-disappearing items will not be continuously visible if the focus is somewhere else on the page.

    Some feedback on the functionality would be great…
    Positive criticism from members is welcome here.

    Scholl district menu hover action

    If you are using HTML5, I think it might be good to add this to the head of the document so there’s a normal CSS hover as a fallback :

    <head>

<noscript><style>#nav li:hover > ul {display: block}</style></noscript>

</head>

    Edit – definitely not working flawless yet, needs some more attention.

    January 10, 2015 at 10:45 am #192825
    atjones44
    Participant

    Awesome I’ll try to get it posted soon!

    January 10, 2015 at 10:52 am #192826
    Shikkediel
    Participant

    Allow me to have another good look, just noticed it’s not working completely as expected yet (when it comes to click/touch and show).
    I’ll do the editing to the pen above.

    Edit – it was the ‘clicking anything else’ to hide that was interfering. Removed it for now until I know of something better. Affects touch only.

    January 10, 2015 at 1:43 pm #192832
    atjones44
    Participant

    Thanks I’ll test it out!

    January 10, 2015 at 3:03 pm #192840
    Shikkediel
    Participant

    Cheers, let me know if they are any quirks I missed.
    Fixed that last bit too so it’s more convenient for touch devices now.

    Edit – if the CSS for the main items is changed to this (edited the pen) :

    .item {
padding: 7px 14px 7px 14px
}

    Then that solves a minor issue – going out from a submenu directly to the main bar triggered a ‘hidden’ because of the margin that was used.

    January 12, 2015 at 8:06 am #192958
    atjones44
    Participant

    Got new code in dreamweaver and tested it, everything looks awesome. One slight issue I’m having is when you click on a link the menu disappears and it doesn’t open the URL? Know what might cause this?

    January 12, 2015 at 9:24 am #192971
    Shikkediel
    Participant

    Okay, that is caused by the same ‘click anything else’ as before.
    To activate the links again it might be best to remove this :

    $('html').on('mousedown touchstart', function() {nav.hide()});

    Plus the line indicated here :

    .on('mousedown touchstart', function(e) {

    e.preventDefault();
    e.stopPropagation(); // this one
    list = $(this).find(first);
    list.toggle();
    nav.not(list).not(sub).hide();
})

    The menus will not automatically hide on touch screens then (that was a minor perk anyway) but the links should be working again…
    I’ll have another brainstorm to see if both can be combined after all.

    January 12, 2015 at 10:14 am #192978
    atjones44
    Participant

    // those lines out, clicks still don’t work on the .fly submenus.

    While im thinking about it, how hard would it be to add the 1 second timeout to the fly submenu’s as well to return back to the menu before it pops out.

    Thanks a lot!

    EDIT: well maybe not the 1second timeout to the fly submenu, because if they didn’t want to go to it, then it would stay up for a second and cause issues I’d think.

    Just let me know on what might be the issue with the fly class not able to click links also.

    January 12, 2015 at 12:53 pm #192988
    Shikkediel
    Participant

    I made a new version that should work but for inexplicable reasons it doesn’t. At this point I could really use a second opinion.

    District school menu 2.0

    The class active is added correctly when I check with the element inspector. But when you go out of a submenu, it will alert undefined for some basic display css of the active class. Change it to any of the other selectors and it will return normally. As thought it doesn’t exist – but alerting active alone does return an object. It’s beyond me.

    January 12, 2015 at 1:17 pm #192992
    atjones44
    Participant

    Well I changed a few things on your other codepen and got the fly object links to work by doing this:

    .on('mousedown touchstart', function(e) {

    e.preventDefault();
    e.stopPropagation();
    list = $(this).find(first);
    list.toggle();
//    nav.not(list).not(sub).hide();

    made fly clickable by doing this: (just removed mouseenter I think)

    $('.fly').on('mousedown touchstart', function(e) {

    e.preventDefault();
    e.stopPropagation();
    sub = $(this).find(nav);
    sub.toggle();
    })
.mouseleave(function(e) {
    e.stopPropagation();
    sub.hide()}, 1000)
    });

    then on the fly I added a timeout which seems to work well and also made the fly objects with the other submenu pop out only on a click and not on hover since on our website I have a background pic and color on the css I added so I couldn’t see body text behind the menu and on all fly items they have a arrow pic indicating which items have another submenu

    #nav li .fly {
background:url(../images/arrow.gif) no-repeat right center;
background-color:#fff;

    maybe this is the best way to go?

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 42 total)
1 2 3
  • The forum ‘JavaScript’ is closed to new topics and replies.