Grow your CSS skills. Land your dream job.

Div Replacement Menu Without Javascript

  • # September 30, 2012 at 7:28 am

    My apologies if this has been requested before (and if it has, I would really appreciate a link to the thread in question) but I’m running into a problem.

    I personally have issues with Javascript, and would prefer to avoid it as much as possible. (That and a good portion of my audience either can’t use JS or deliberately disable it.)

    What I’m looking for, is a way to setup a ‘menu’ of sorts similar the accordion on the Snippets page.

    Despite a great deal of searching, I haven’t been able to find any guides on a CSS-only two-column accordion like that, where one column serves as a menu and the other displays content depending on which menu item has been clicked.

    (I will also note I’m pretty open minded about how to pull this off, so long as it remains accessible without Javascript and without vision.)

    # September 30, 2012 at 1:38 pm

    Why not try this with PHP or so. It is possible with CSS, but in a very “hacky/ugly” (and not bulletproof) way.

    Might wanna do something like this:

    < ?php
    // Get the page ID
    $page = $_GET;

    if( !empty($page) ) {
    // Get the page content stuff from a database (or so)
    } else {
    // Show the default stuff
    }
    ?>

    # September 30, 2012 at 5:51 pm

    I am intrigued. Can you tell me more about this option? I’ll confess I have no experience with PHP.

    # October 1, 2012 at 1:29 am

    Sorry for the double-post, but this has been sitting here several hours without reply and I had another idea. (Still interested in any advice anybody might have on the PHP method though.)

    Could this be done with frames somehow? I was reading up on frames and it seems like there might be potential (and I intend to do some experimentation) but if anybody has any experience/advice on this that would rock.

    (Also if a mod sees this since it’s turning into a pretty diverse discussion if there’s a more appropriate board than the CSS one I’d appreciate if you’d move it to the right place.)

    # October 1, 2012 at 4:33 am

    Wow cowboy stop! No frames :) They are horrible.

    What kind of website it is? Is it just HTML? And this could be the PHP code:

    < ?php
    $page_id = $_GET;

    if( !empty($page_id) && is_numeric($page_id) ) {

    // Connect to mysql
    $mysql = mysql_connect(‘localhost’, ‘username’, ‘password’) or die(mysql_error());
    $db = mysql_select_db(‘your_db’) or die(mysql_error());

    $select = “SELECT * FROM your_db_table WHERE id = ‘” . mysql_real_escape_string($page_id) . “‘”;
    $sql = mysql_query($select) or die(mysql_error());

    if( mysql_num_rows($sql) > 0 ) {
    // There’re results
    $data = mysql_fetch_object($sql);

    echo $data->text;
    } else {
    // There’re no results
    echo ‘This will be the standard text’;
    }

    } else {
    echo ‘This will be the standard text.’;
    }
    ?>

    But you should really read you in to PHP before using any of this. Why can’t you use javascript BTW?

    # October 1, 2012 at 7:04 am

    What’s horrible about frames exactly?

    As for what kind of website it is… currently it’s not. This is something I’m sort of piecing together a little at a time. It’s a personal site so to speak, presenting some stuff and practicing a few different things, etc.

    I have PHP on my server, but I haven’t tried doing any scripting yet. You’re right I should start studying PHP before I try to use anything given here, but I’d also appreciate it if you could explain the code you suggested :P (If not, it’s no big deal.)

    As for why no Javascript, A: I don’t like it and frequently disable it (as do several of the people who would be viewing the site.) and B: some of the people viewing it CAN’T use Javascript. (Screen-reader dependent.)

    # October 1, 2012 at 10:45 am

    I would say…. if you don’t like Javascript, that’s cool and all, but then there’s no point expecting things to work perfectly. Sure there are ways to “mimic” it, but you’re getting yourself in too much trouble I think.

    My point of view is basically; with no Javascript, you’re “handicapped” on the web. If you choose to disable it, you have to accept that you won’t get the full experience.

    I know that doesn’t help you with your problem, but just for what it’s worth. :)

    # October 1, 2012 at 11:33 am

    Just one man’s opinion: http://www.html-faq.com/htmlframes/?framesareevil (but there’re more out there).

    And I agree with Senff about the javascript part. I like javascript a lot, and can’t see why you don’t like it, so I would prefer javascript (after hearing your reason) for this.

    A little explanation of the code:

    First you check or the $page_id is not empty and or it’s numeric or not (a page_id should always be numeric). If that’s true, the $page_id is a real (or is likely to be a real id), so we can proceed.

    After that, the first thing you’ve to do is connecting to your database. So you connect with a username and password and select your database.

    Now you’re connected (or not if something went wrong). Now we’ve got to get some data for this specific $page_id; So we (try) to select the page_id with all the data that is connected to the page_id. If no result is returned by the database, the mysql_num_rows() will return 0 (=zero). In case you’ve got a result: the mysql_num_rows() will contain (at least) one result.

    If you’ve got a result you can show it to the user by echo-ing it out.

    After all, please look into javascript (it’s ideal for this!). Javascript has so many opportunities! More than PHP.

    # October 1, 2012 at 6:11 pm

    Very interesting stuff. I’m going to have to do some deeper research on all this before I can come to a final conclusion, but I think for the moment I might go with a simple static site and gradually enhance it.

    Thanks for the advice guys, it’s given me a lot to think about.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".