www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] apple style menu bar

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    resolved [RESOLVED] apple style menu bar

    http://www.apple.com/

    Here's my go at it... but the question i have is can i put my logo on top of the bar instead of inside the first bar. I want my logo in the same place as the apple logo except with a higher z-index so to speak so it hangs over a bit.

    http://greenfitco.com/tm/apple.html

    any help on this would be greatly appreciated, as usual.

    =)

  2. #2
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Question about svg file, hopefully someone can help me.

    http://images.apple....balnav_text.svg

    If i add this link to the css the nav titles show up as this vector graphic.

    Look at it here:

    Code:
    /* TEXT */
    #globalheader            #globalnav li            a span { display:block; width:100%; height:30px; margin:3px auto; background:url() no-repeat 50% 0; _background-image:url(); }
    #globalheader.svg        #globalnav li            a span { background-image:url(http://images.apple.com/global/nav/images/globalnav_text.svg); }
    #globalheader.decelerate #globalnav li            a span,
    #globalheader.ios3       #globalnav li            a span { background-image:url(); }
    #globalheader            #globalnav li#gn-apple   a span { background-position:50% 0; }
    #globalheader            #globalnav li#gn-store   a span { background-position:50% -30px; }
    #globalheader            #globalnav li#gn-mac     a span { background-position:50% -60px; }
    #globalheader            #globalnav li#gn-ipod    a span { background-position:50% -90px; }
    #globalheader            #globalnav li#gn-iphone  a span { background-position:50% -120px; }
    #globalheader            #globalnav li#gn-ipad    a span { background-position:50% -150px; }
    #globalheader            #globalnav li#gn-itunes  a span { background-position:50% -180px; }
    #globalheader            #globalnav li#gn-support a span { background-position:50% -210px; }
    If i take that svg file out and add my own nothing shows up. What's the process with saving svg files or have i completely lost the plot.

    It works if i paste the apple link in but doesn't not work when i use my own file. =/


    Here's my file:

    http://www.greenfitc...m/tm/Navvv1.svg

    It's obviously not rendering right.

    any help would be appreciated. thanks

  3. #3
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Still need help on this last bit.

  4. #4
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Thumbs up

    ok, well now it's officially resolved and just in case anybody else runs into this problem.

    You need to add the tags into an .htaccess file like so:

    AddType image/svg+xml svg
    AddType image/svg+xml svgz

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles