Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Mar 2010
    Posts
    3
    Member #
    21577
    Hello,

    I was inspired by the presented below menu bar, and would like to make exactly the same one for my website.

    I tried to make that kind of menu following the tutorial on CSS button creation located by this link:

    http://preview.tinyurl.com/2jrjj6

    *Used TinyURL to shorten the url and also because it contains a word that this forum censors.

    But it didn't work because there's two button styles, one with curved edge(the most left/right buttons usually) and non-curved edge buttons(located between the outmost left/right buttons).

    How would you go about making this kind of CSS menu?
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Each one of your buttons consists of two images.
    The normal button, and the blue button (mouse over or pressed).

    You display them in a row and use a mix of CSS and Javascripting to
    handle the swapping of the images on mouse-over. It could be done
    with pure CSS, or some nicer fading effects with JQuery (Javascripting).

    The image you provided ... was that a shot of a menu from an existing site,
    or is that your own "envisioned" design? If you find a site with a menu you
    like, let us know the link.


  4. #3
    Junior Member
    Join Date
    Mar 2010
    Posts
    3
    Member #
    21577
    Alright

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Their menu is part of a template (probably a professional template they purchased).
    It uses JQuery, CSS, and a bunch of images. If you view their HTML source, you can
    see all of the files required, but to actually pick-out everything you need to duplicate
    it will be somewhat time consuming.

    But if you have no JS experience, I guess it would be tough to begin with.

    I guess I would tell you to look for a free CSS template (using Google).
    Find something you like and customize it. You could email that car site and ask
    them where they got their template from.

    Without programming experience, you'll have to start at square one.
    We can't teach you that here.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com