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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16

Thread: Advice Needed!

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025

    Advice Needed!

    Hello
    Basically I am looking for some advice. I was given the menu below designed in photoshop and asked to code it. I have looked everywhere and cannot figure out a way to do so. Any help would be much appreciated.
    Screen Shot 2015-03-15 at 4.12.27 AM.jpg

    Thanks in advance!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    Are you showing all of them dropped down as an example (they are always dropped down), or do they only drop down when you mouse-over the top menu item?

    Without using Flash this is really going to be hard. And using Flash is a problem, as not all devices support Flash.

    It is do-able though using CSS position. Everything will crumble when you start using devices with smaller screens. For me personally, I would not waste the time and energy to make that work. I would not spend a week working on a menu. It isn't worth it. People just want a menu that works.


  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I'm with Max on this. In theory, it could be done using image maps, but even that's going to be tricky. I've done this myself about 13 years ago with Flash, but as Max pointed out...it's Flash, so it's on its way out.

    This would be a whole lot easier for you if whoever gave you that menu replaced the diagonal lines with vertical ones.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    I agree with both of you. Flash is out of the question, not enough devices support it. The site already has code in it to resize with each device.

    the image is just a render of what the whole menu would look like if it were expended. The drop downs would be mouse-over events. I am defiantly not looking forward to doing it, but it was a request of the client. I have done many simpler menus. I am all for function first then design, but this is a very special request and they are not budging on what they want.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    In theory...and I say in theory because I have never tried what you're about to and have no reason to do so...you can generate CSS3 parallelograms that might do the trick. I generated the code from EnjoyCSS, and have not tested it.
    Code:
    <div class="parallelogram"></div>
    Code:
    .parallelogram {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 150px; /* you'll need to change these dimensions and the background color */
      height: 100px;
      border: none;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      color: rgba(0,0,0,1);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: #1abc9c;
      -webkit-transform:    skewX(30deg); /* the skew is what gives you the angle for your parallelogram. I guessed yours were 30 degrees. */
      transform:    skewX(30deg);
    }
    Now, because this is CSS3, it won't work on non-CSS3-compliant browsers (read: IE8 and earlier). As Max also pointed out, you'll need to figure out something for cell phones, and that menu looks a shade too wide as it stands right now (you'll probably have to take out some padding and/or move the menu closer to the home icon and/or use regular rectangles for that.) But this should hopefully get you started. If this doesn't, I genuinely have no idea what will.
    Last edited by TheGAME1264; Mar 15th, 2015 at 08:40 PM.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    Thank you!

    I'll give it a try and let you know how it goes! Fingures crossed.

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Cool.

    Feel free to put up a link if/when you get something, or when you have questions. We normally don't allow it, but in this case I'm going to make an exception because 1) if you come up with something it's bound to help others and 2) I'm curious, as I'm sure Max is, to see how it turns out.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    Sorry, Just getting back to this! So the code you suggested worked like a charm in the sense that it made the menu start to resemble parallelograms.
    However two problems:
    1) the 30 degree slant actually is affecting the font and I cannot figure out how to make the font straight.
    2) I cannot get the 30 degree angel of the drop downs to line up.

    Here is what it is looking like: http://rhonnytufino.com/

  10. #9
    Junior Member
    Join Date
    Mar 2015
    Posts
    8
    Member #
    48025
    Here is the code for the menu:
    Code:
    .CSS-nav
    {
       margin:0 auto;
       position: relative;
       z-index: 499;
       text-align: center;
       background: #FFFFFF;
    } 
    
    
    ul.CSS-hmenu a, ul.CSS-hmenu a:link, ul.CSS-hmenu a:visited, ul.CSS-hmenu a:hover 
    {
       outline: none;
       position: relative;
       z-index: 11;
    }
    
    ul.CSS-hmenu, ul.CSS-hmenu ul
    {
       display: block;
       margin: 10px;
       padding: 0;
       border: 0;
       list-style-type: none;
       font: normal 100%; 
       
    }
    
    ul.CSS-hmenu li
    {
       position: relative;
       z-index: 5;
       display: block;
       float: left;
       background: none;
       margin: 10;
       padding: 0;
       border: 0;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 125px; /* you'll need to change these dimensions and the background color */
      height: 55px;
      border: none;
      font: normal 100%
      float: left;
      color: #FFFFFF;
      -o-text-overflow: clip;
      text-overflow: clip;
      background: #EEEEEE;
      -webkit-transform:    skewX(30deg); /* the skew is what gives you the angle for your parallelogram. I guessed yours were 30 degrees. */
      
    }
    
    ul.CSS-hmenu li:hover
    {
       z-index: 10000;
       white-space: normal;
    }
    
    ul.CSS-hmenu:after, ul.CSS-hmenu ul:after
    {
       content: ".";
       height: 0;
       display: block;
       visibility: hidden;
       overflow: hidden;
       clear: both;
    }
    
    ul.CSS-hmenu, ul.CSS-hmenu ul 
    /*{
       min-height: 0;
    }*/
    
    ul.CSS-hmenu 
    {
       display: inline-block;
       vertical-align: bottom;
    }
    
    .CSS-nav:before 
    {
       content:' ';
    }

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    I actually think the slanted tiles w/lettering looks cool just like you have it now.

    Make the font-size a bit larger and it will be easier to read.

    You can see how the menu tabs w/slanted text sort of matches the logo? That's what is cool about it.

    Another method might be to make graphic images for each one and do mouseover things. The CSS method is much cleaner though.



Page 1 of 2 1 2 LastLast

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
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:50 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com