Web Analytics Made Easy -
StatCounter Slanted navigation with CSS - CodingForum

Announcement

Collapse
No announcement yet.

Slanted navigation with CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Slanted navigation with CSS

    So far my research has just about come up empty on this topic. What I'm being asked to do is implement a horizontal band of slanted images for navigation.

    Like this:



    My only solution, and this doesn't exactly seem elegant, is to have the entire navigation in ONE image with <a> text tags on top of it, and each time a new link is clicked, load a new image for the entire background.

    I was thinking of creating one large image for all active days of the week, then using CSS to position the pertinent image with pixels to minimize load times.

    I'm thinking there has to be a better way though...

    Any ideas?

  • #2
    Just follow this link, http://www.webcredible.co.uk/user-fr...-corners.shtml, it is for curved tags, but you can use basically the same concept.
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

    Comment


    • #3
      Thanks, this looks like it has potential. I"ll post again once I've either had success or miserable failure.

      Comment


      • #4
        The problem you're going to have is that your anchor images overlap, unless you spread them out. I was trying to workout something similar for the longest time. Came to the conclusion that it's easier with javascript.

        I still have it up here. No it's not elegant, and my javascript skills are limited. I never got around to making it valid either.

        Comment


        • #5
          You read my mind, Fisher!

          I was staring at my images and the example posted above, trying to work it out in my head how it's going to work, and it's going to be a major b---- to try and get this done in CSS because the diagonal images overlap.

          Our graphic designer who drew this up is talented, but doesn't know or understand CSS, so I'm going to ask my boss if we can either do rounded corners or (please, please) rectangles. Since he wants this done ASAP, I have a good feeling he'll comply.

          Thanks all for posting!

          Comment


          • #6
            Depends how fussy they are about the hit area matching the background exactly.

            The nav here may help: http://www.nhs.uk/Pathways/asthma/Pages/Landing.aspx

            Comment


            • #7
              When I looked at this from a different approach, it was really quite simple. Just glad I finally figured out a way. Test page is here.

              The image must have transparency, as they overlap each other.

              Code:
              <!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">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>Untitled Document</title>
              <style type="text/css">
              html, body {
              	height: 100%;
              	font-family: Arial, Helvetica, sans-serif;
              	background:#fff;
              	text-align:center;
              }
              * {
              	margin: 0;
              	padding: 0;
              }
              /*---Navigation---*/
              .nav {
              	width:800px;
              	font-size:12px;
              	text-align:center;
              }
              .nav ul, .nav li {
              	display:inline;
              	list-style-type:none;
              }
              #home a, #page2 a, #page3 a, #page4 a, #contact a {
              	line-height:40px;
              	float:left;
              	width:160px;
              	height:40px;
              	text-decoration:none;
              	font-weight:bold;
              }
              #page2 a, #page3 a, #page4 a, #contact a {
              	margin-left:-19px;
              }
              #home a, #page2 a, #page3 a, #page4 a, #contact a {
              	background:url(arrow.png) 0px 0px no-repeat;
              	color:#fff;
              }
              #home a:hover, #page2 a:hover, #page3 a:hover, #page4 a:hover, #contact a:hover {
              	background:url(arrow.png) 0px -40px no-repeat;
              	color:#FF0;
              }
              </style>
              </head>
              <body>
              <ul class="nav">
                <li id="home"><a href="overlap.html">Home</a></li>
                <li id="page2"><a href="overlap.html">page2</a></li>
                <li id="page3"><a href="overlap.html">page3</a></li>
                <li id="page4"><a href="overlap.html">page4</a></li>
                <li id="contact"><a href="overlap.html">Contact</a></li>
              </ul>
              </body>
              </html>

              Comment


              • #8
                jQuery/CSS/XHTML Solution

                I recently had this request from a client, and I decided to package together the result for other facing the same situation out there. It wasn't an easy task but here it is:

                http://work.kevinleary.net/diagonal-...ion-setup.html

                Comment

                Working...
                X