how's this for navigation?

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I've been playing around with an idea for a nav/ menu/ whatever using area maps and javascript image swaps.... I'm sure I've chosen the most programmingly cumbersome way to make it come about but it works, sort of.

check it out.

I wasn't sure where to post this cuz I don't really have any acute issue with it - I'd just like to hear some views, especially ideas about how to make it tighter coding-wise, lighter and generally better... also alternative ways of doing the same thing... easier, quicker ways...(except flash. I know flash could do it in two minutes. I wanted it to be non-flash).

anyhow. thanks in advance...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Well... The way to make it lighter would be to write your own code. The stuff that Dreamweaver/Fireworks builds for you will work (and is actually quite robust) but its bloated and quite honestly overkill for something like a simple image swap.

If you want a more animated feel you might want to look at javascript libraries like jQuery or Mootools
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I like that. :D

If I think of anything good I'll be sure to post it, but at the moment the only things that come to mind seem overly complicated. :scratchhead:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Well, if you are going to use it, you can make it smaller at the top left part of content pages... this way you have it on every page to brag about :lol:

Well, keeps consistency is what it does...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

yeah I'll have to look into jquery!!

someone at another forum said he thought it might be possible to do just through the use of CSS...... but he was a little vague about it. anyhow he said this:
Quote:
Basically to do it with no JS/maps use the image swap/slide technique with a <a> tag. You would have to change it to a block level element tho using display.

but in truth I'm not sure what he's getting at. anyone got any brainwaves about it? :D
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I think I do... I'll try something and come back at you... I think he was fibbing though :lol: I get his idea but I don't see how it would work.
  • hFry
  • Novice
  • Novice
  • User avatar
  • Posts: 21

Post 3+ Months Ago

props. BA navi. I wish i could apply my Wacom and PS skills to a website.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Quote:
props. BA navi.

I've no idea what that means :D
Quote:
I wish i could apply my Wacom and PS skills to a website.

'ffcourse you can!! sky's the limit............. if there's a way to imagine it, there's a way to code it.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I think BA navi is short for "Bad arsed navigation"

Nice font too, btw.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6251
  • Loc: Seattle, WA

Post 3+ Months Ago

It's been a while since I've seen a navigation scheme as unique as that. I think it looks cool!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

WooT! ... really cool ... I have no code suggestions though ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Firstly, I thought it was pretty cool - I love to see navigation that is a little different.


I think, if I really tried and sweated some blood and tears, I could get that menu to work as an unordered list, perhaps using the css sprite technique of changing background images. Don't quote me on this though, since I've not thought too deeply about it.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Zwirko wrote:
Firstly, I thought it was pretty cool - I love to see navigation that is a little different.


I think, if I really tried and sweated some blood and tears, I could get that menu to work as an unordered list, perhaps using the css sprite technique of changing background images.

Ha, the jokes on you.

lol couldn't resist.

That's what I was saying on my other post...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Couldn't you have waited for my entry? I give up lol... it's already done...

Good going Joe
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

float about positioning? I can try with the labels :P (Editing your thing of course).
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

not yet... didn't start. I think I will attempt right now
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

this was too easy Joebert. Surprised you didn't do it.
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">
    body{text-align:center;}
    #blocks
    {
        /*background: #eee url("italian.gif");*/
        margin: auto;
        width: 500px;
        height: 525px;
    }
    #blocks a
    {
        /*display: block;*/
        float: left;
        width: 143px;
        height: 132px;
        background: transparent url("blocks.gif") 0 1px;
        text-decoration: none;
        position: absolute;
    }

    #blocks a span
    {
        display: block;
        margin-top: 50px;
    }
    
    #blocks a#one
    {
        margin-top: 340px;
        margin-left: 60px;
    }
    #blocks a#one span
    {
        margin-left: -200px;
    }
    #blocks a#two
    {
        margin-top: 340px;
        margin-left: 180px;
    }
    #blocks a#two span
    {
        margin-left: 150px;
    }
    #blocks a#three
    {
        margin-top: 225px;
        margin-left: 180px;
    }
    #blocks a#three span
    {
        margin-left: -200px;
    }
    #blocks a#four
    {
        margin-top: 225px;
        margin-left: 297px;
    }
    #blocks a#four span
    {
        margin-left: 150px;
    }
    #blocks a#five
    {
        margin-top: 110px;
        margin-left: 180px;
    }
    #blocks a#five span
    {
        margin-left: 150px;
    }
    #blocks a#six
    {
        margin-top: 135px;
        margin-left: 145px;
    }
    #blocks a#six span
    {
        margin-left: -200px;
    }
    #blocks a#seven
    {
        margin-top: 20px;
        margin-left: 145px;
    }
    #blocks a#seven span
    {
        margin-left: -200px;
    }
    
    #blocks a#one:hover
    {
        background-position: -144px 1px;
    }
    #blocks a#two:hover
    {
        background-position: -287px 1px;
    }
    #blocks a#three:hover
    {
        background-position: -430px 1px;
    }
    #blocks a#four:hover
    {
        background-position: -573px 1px;
    }
    #blocks a#five:hover
    {
        background-position: -716px 1px;
    }
    #blocks a#six:hover
    {
        background-position: -859px 1px;
    }
    #blocks a#seven:hover
    {
        background-position: -1002px 1px;
    }
    </style>
</head>
<body>
    <div id="blocks">
        <a href="#" id="one"><span>One</span></a>
        <a href="#" id="two"><span>Two</span></a>
        <a href="#" id="three"><span>Three</span></a>
        <a href="#" id="four"><span>Four</span></a>
        <a href="#" id="five"><span>Five</span></a>
        <a href="#" id="six"><span>Six</span></a>
        <a href="#" id="seven"><span>Seven</span></a>
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6.     <meta http-equiv="Content-Style-Type" content="text/css" />
  7.     <style type="text/css">
  8.     body{text-align:center;}
  9.     #blocks
  10.     {
  11.         /*background: #eee url("italian.gif");*/
  12.         margin: auto;
  13.         width: 500px;
  14.         height: 525px;
  15.     }
  16.     #blocks a
  17.     {
  18.         /*display: block;*/
  19.         float: left;
  20.         width: 143px;
  21.         height: 132px;
  22.         background: transparent url("blocks.gif") 0 1px;
  23.         text-decoration: none;
  24.         position: absolute;
  25.     }
  26.     #blocks a span
  27.     {
  28.         display: block;
  29.         margin-top: 50px;
  30.     }
  31.     
  32.     #blocks a#one
  33.     {
  34.         margin-top: 340px;
  35.         margin-left: 60px;
  36.     }
  37.     #blocks a#one span
  38.     {
  39.         margin-left: -200px;
  40.     }
  41.     #blocks a#two
  42.     {
  43.         margin-top: 340px;
  44.         margin-left: 180px;
  45.     }
  46.     #blocks a#two span
  47.     {
  48.         margin-left: 150px;
  49.     }
  50.     #blocks a#three
  51.     {
  52.         margin-top: 225px;
  53.         margin-left: 180px;
  54.     }
  55.     #blocks a#three span
  56.     {
  57.         margin-left: -200px;
  58.     }
  59.     #blocks a#four
  60.     {
  61.         margin-top: 225px;
  62.         margin-left: 297px;
  63.     }
  64.     #blocks a#four span
  65.     {
  66.         margin-left: 150px;
  67.     }
  68.     #blocks a#five
  69.     {
  70.         margin-top: 110px;
  71.         margin-left: 180px;
  72.     }
  73.     #blocks a#five span
  74.     {
  75.         margin-left: 150px;
  76.     }
  77.     #blocks a#six
  78.     {
  79.         margin-top: 135px;
  80.         margin-left: 145px;
  81.     }
  82.     #blocks a#six span
  83.     {
  84.         margin-left: -200px;
  85.     }
  86.     #blocks a#seven
  87.     {
  88.         margin-top: 20px;
  89.         margin-left: 145px;
  90.     }
  91.     #blocks a#seven span
  92.     {
  93.         margin-left: -200px;
  94.     }
  95.     
  96.     #blocks a#one:hover
  97.     {
  98.         background-position: -144px 1px;
  99.     }
  100.     #blocks a#two:hover
  101.     {
  102.         background-position: -287px 1px;
  103.     }
  104.     #blocks a#three:hover
  105.     {
  106.         background-position: -430px 1px;
  107.     }
  108.     #blocks a#four:hover
  109.     {
  110.         background-position: -573px 1px;
  111.     }
  112.     #blocks a#five:hover
  113.     {
  114.         background-position: -716px 1px;
  115.     }
  116.     #blocks a#six:hover
  117.     {
  118.         background-position: -859px 1px;
  119.     }
  120.     #blocks a#seven:hover
  121.     {
  122.         background-position: -1002px 1px;
  123.     }
  124.     </style>
  125. </head>
  126. <body>
  127.     <div id="blocks">
  128.         <a href="#" id="one"><span>One</span></a>
  129.         <a href="#" id="two"><span>Two</span></a>
  130.         <a href="#" id="three"><span>Three</span></a>
  131.         <a href="#" id="four"><span>Four</span></a>
  132.         <a href="#" id="five"><span>Five</span></a>
  133.         <a href="#" id="six"><span>Six</span></a>
  134.         <a href="#" id="seven"><span>Seven</span></a>
  135.     </div>
  136. </body>
  137. </html>

:D
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I'm going to be the dissenting opinion here, sorry. :P

The navigation is pretty/colorful/neeto, and all, but it seems cumbersome and impractical for the task of choosing a language. Especially when I regard the content you have in your site, currently.

Is this just a language toggle? Is it part of a presentation to show off your translation skills? Why is this so elaborate for such a small function?

Why the effort to streamline this? Who cares? The person making hiring/contract decisions won't.

Again, sorry. I'm trying to give you some feedback that's valuable. This just seems like more of a bleep than a big KA-BLAM!
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I see I wasted my time.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6807
  • Loc: Martinsburg, WV

Post 3+ Months Ago

As far as doing this kind of stuff with CSS, take a look at this stuff

http://www.cssplay.co.uk/menus/hexagon.html
http://www.cssplay.co.uk/menus/cross.html
http://www.cssplay.co.uk/menus/jigsaw.html
http://www.cssplay.co.uk/menus/olympic.html
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

joebert wrote:
I see I wasted my time.


Not at all, sir. As a matter of learning experience in development methods, and such, this is great. I'm questioning the usefulness of the product from a design stand point and its value as apart of information delivery.

//I hope I haven't offended you, celandine. :cry:
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

dM - no offense taken, I come here to get different opinions :D

the idea wasn't to make a language toggle, in fact I don't know what the navigation would be used for - it was simply an exercise in creativity. I'm going to use it somewhere at some point, but it might not have languages attached to it. the reason I put languages was because it's a little more fun than 'home', 'about us', 'contact' etc etc, and a friend of mine was thinking of starting her own translation website so I was thinking she might have a page for each language. (she probably wouldn't though :D)

thanks to everyone who made efforts to help - I'll check it all out and see what I can do with it. I really want to streamline this thing - if I can make it work I can make hundreds of other creative navs in the future on the same principles...

sorry I haven't been checking back here for a bit, but the day job got really rough lately and I'm just so miserable most of the time, no enthusiasm for anything....... this is the one thing that gives me some stress relief though.

again, thanks everybody :D I'll post edits as they come.....

EDIT: I must admit I feel exceptionally thick at the moment, but Joe, what did you do? I see bogey's code (which I'm currently trying to unravel) and I see from the comments that you did something, but I can't find what where....? (I can see this is going to be one of those d'oh moments...)

EDIT 2: grinch, those links look really interesting. I'll definitely give that a go :D
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I think with the concept you have, an hour in a recording studio and Adobe Flash, you could have one fine translation-themed multimedia presentation. :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Quote:
I must admit I feel exceptionally thick at the moment, but Joe, what did you do?


You're not crazy, I nuked my replies.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

celandine wrote:
EDIT: I must admit I feel exceptionally thick at the moment, but Joe, what did you do? I see bogey's code (which I'm currently trying to unravel) and I see from the comments that you did something, but I can't find what where....? (I can see this is going to be one of those d'oh moments...)


I didn't do anything different tat what Joe did. The code I have is actually Joe's with one line commented out and moved somewhere else. (Well, and some other lines added).

But it's the positioning, margins and display that is doing the job (well, heights, widths, the image and those stuff add to the effect :lol: ).

I think I understand it :lol:
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I'm not sure I do yet :D but by god I will....

thanks again, one and all....

Post Information

  • Total Posts in this topic: 26 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.