Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Web Front End UI Development

Options
  • 17-01-2014 2:26pm
    #1
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭


    I'm starting to improve upon my front end web development skills, specifically interactive webpages. To start, I'm going to try to create a few dropdown navigation menus ranging from a simple dropdown menu to something more advanced like the Boards.ie navbar or the dropdowns at http://www.o2online.ie/o2/

    Anyway, I'm struggling to find a starting point because there seems to be numerous different techniques and methodologies to accomplishing this. I don't want to use jQuery yet because I don't think it would be a good idea to abstract away the "nitty gritty" at such an early stage of my learning.

    I have a few questions:

    (1) What are the best/most common ways of implementing dropdown menus? CSS only, or CSS & Javascript? Fundamentally, does it basically involve positioning the dropdown DIV underneath the menu button and toggling the display CSS value? Are there any other approaches?

    (2) Does anyone know how the menu system here at Boards.ie is implemented. I had a look at the code via Firebug and I can't follow it. When I view source, I can see the top categories (Arts, Biz, Edu, etc) as a UL, but I don't know where the contents for their dropsdowns are?

    Finally, have you any recommendations for a good dedicated CSS/JS/jQuery online forum for a newbie like me - I have a feeling I'll be asking a lot of questions before I get proficient at this.


Comments

  • Options
    #2
    ThrowinShapes
    Registered Users Posts: 63 ✭✭ThrowinShapes


    If you can do it in CSS, then I'd go for it. Just a heads up though, and this goes for a CSS or JS solution: the hover trigger won't behave as expected on mobile.

    You can check out a quick demo I did here just using CSS: http://codepen.io/tjFogarty/pen/GFfAx

    I'm using Sass as a preprocessor, but you should be able to see from the structure how it works. I've a <ul> within an <li>, and when I hover over the <li> I then make the nested <ul> visible.

    On boards.ie, if you view the <li>, within it is an anchor tag and a div containing the dropdown menu. The interaction appears to be JavaScript-driven.

    I think this place is as good as any to learn. You might want to browse http://stackoverflow.com/ as chances are something you want to know has already been answered there.


  • Options
    #3
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭SimonTemplar


    ThrowinShapes wrote: »
    If you can do it in CSS, then I'd go for it.

    Thanks. If there any disadvantage to using CSS only, perhaps around browser combatability (IE).


  • Options
    #4
    ThrowinShapes
    Registered Users Posts: 63 ✭✭ThrowinShapes


    SimonTemplar wrote: »
    Thanks. If there any disadvantage to using CSS only, perhaps around browser combatability (IE).

    I've used this as far back as IE8. The only disadvantage is you don't really have control over how it transitions into visibility on older browsers, (e.g. fade in) but it still works which is the main thing.


Advertisement