Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Need Help With Navigation.
zach101
post Jun 19 2006, 06:45 PM
Post #1


Premium Member
********

Group: Members
Posts: 178
Joined: 26-June 05
Member No.: 8,699



Hey guys im making a site that needs to have well im not sure what its called im sure its in css though. Any way what I need is a navigation that when hovered over drops out to the side like this below:

Original Nav:
Home
About SSEC
Staff
Services
Store
Photo Gallery
News and Events
Contact

However when one is hovered over it looks like:

Home
About SSEC
• Mission Statement
• History
Staff
• Dr. John.Doe
• Dr. John.Doe
• Office Manager
Services
• Dentistry
• Lameness
• Pre-purchase
• Reproductive
• Vaccinations
Store
• Price Lists
• The Wrap Center
Photo Gallery
News and Events
Contact
• Mailing Address
• Phone
• Email
• Opportunities

Of course I dont want it to be that when you put your cursor over about or store they all hover thats just an example of what they would all look like im sure you guys have seen many like it before. So what im wondering is do any of you guys know a site in which you could direct me? I dont know enough CSS my self to actually write it all by hand and im sure its pretty simple.
Go to the top of the page
 
+Quote Post
Paul
post Jun 19 2006, 09:19 PM
Post #2


Premium Member
********

Group: Members
Posts: 174
Joined: 25-February 06
From: Austin, TX
Member No.: 19,113



I think this site (http://www.seoconsultants.com/css/menus/tutorial/) has it laid out pretty clean.. The problem with creating a hover menu using only CSS is that it is not VERY compatible! Using a combination of JavaScript and CSS would probably be the best solution!

There is a great example of Suckerfish dropdown menus here: http://www.htmldog.com/articles/suckerfish...ple/bones2.html

You can view the source and edit it to your needs wink.gif
Go to the top of the page
 
+Quote Post
Plenoptic
post Jun 19 2006, 09:52 PM
Post #3


Trap Double Mocha Member
***************

Group: [HOSTED]
Posts: 2,228
Joined: 5-November 05
From: That one place over there...
Member No.: 13,830



That looks like what he needs. That is a good source because that is something I have been looking for as well but I thought it was a JavaScript. Maybe I can use that for my site now if I ever get it back going again.
Go to the top of the page
 
+Quote Post
zach101
post Jun 20 2006, 07:40 AM
Post #4


Premium Member
********

Group: Members
Posts: 178
Joined: 26-June 05
Member No.: 8,699



awesome thanks alot guys now i just have to tweak it and i may be posting some more replies if i need help tweaking it. I did decide however that i liek this one better which is i belive made by the same person which i also found through the link you gave me smile.gif any way thanks guys!!
Link:http://www.alistapart.com/articles/horizdropdowns

This post has been edited by zach101: Jun 20 2006, 07:40 AM
Go to the top of the page
 
+Quote Post
Goosestaf
post Jun 20 2006, 07:47 AM
Post #5


Privileged Member
*********

Group: Members
Posts: 503
Joined: 22-September 04
From: Worcester/Milton Keynes (UK)
Member No.: 1,226



http://www.alvit.de/css-showcase/css-navig...es-showcase.php

EXCELLENT site sfor CSS naviagtion techniques.
its all you should ever need biggrin.gif
Good tutorials on how to make the navigation look really nice and classy too.
Very 'newbie' friendly too smile.gif
Go to the top of the page
 
+Quote Post
zach101
post Jun 21 2006, 12:13 AM
Post #6


Premium Member
********

Group: Members
Posts: 178
Joined: 26-June 05
Member No.: 8,699



Hey guys on this navigation ive figured out most of it, Like the background color and other stuff but how do I make the text and the whole lay out just bigger? what to I type in this area to make it liek twice as large.
Area to put the code in:(i assume)
CODE
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

Actual site:http://www.alistapart.com/articles/horizdropdowns

This post has been edited by zach101: Jun 21 2006, 12:14 AM
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. [PHP/JS]Expanding Navigation Menu(2)
  2. Vertical Tabbed Navigation(2)
  3. Test Browser Design(10)
  4. Update Navigation Links?(2)
  5. Php Navigation(7)
  6. How To Solve Increasing Menu Navigation Lists(5)
  7. Where Is Cpanel And Controls?(3)
  8. Generalized Navigation Bar(4)
  9. Need Help Wite Viewing Site In Ie(5)
  10. Navigation Problem With My Site(9)
  11. How To Create Php Navigation(page.php?go=whatever)(10)
  12. Make Navigation Easier In Trap17 Forum(3)
  13. Navigation On Forum?(7)
  14. Php Id Navigation Problem(1)
  15. Custom Navigation Bar In Smf(0)
  1. Creating Navigation For Html Websites(12)
  2. Navigation Menu(1)


 



- Lo-Fi Version Time is now: 8th October 2008 - 04:01 AM