Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Css Dropdown Menu Problems

This is a discussion on Css Dropdown Menu Problems, within the CSS section. This forum and the thread "Css Dropdown Menu Problems" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Css Dropdown Menu Problems
unitedcraig
post Apr 2 2008, 09:26 AM
Post #1


Rapid Squeezer
****

Group: Advisors
Posts: 479
Joined: 14-February 08
From: Stockport
Member No.: 75
I am not sure if this is possible, and sorry if it doesn't make that much sense wink.gif

http://craigmoran.co.uk/home.php

What I want to do is instead of having a navigation bar, is just to have one link and have this as dropdown linking to the other pages.

What I need is

1. Help on a decent dropdown, I can hide the second links, it's just getting them to appear again that i struggle with wink.gif
2. Is there a way through CSS to have the current dropdown display where it says home now if you get what i mean, for example, when the secondary links are hidden and dropping down, when i click on contact, is there a way through CSS to get this to appear where home is now, or would i need JS for this?

Sorry if this is a little confusing

thanks in advance smile.gif

Craig


--------------------

Working progress
Go to the top of the page
 
+Quote Post
unitedcraig
post Apr 2 2008, 10:17 AM
Post #2


Rapid Squeezer
****

Group: Advisors
Posts: 479
Joined: 14-February 08
From: Stockport
Member No.: 75
http://craigmoran.co.uk/style.css

Here's a quick link to my css if this helps


--------------------

Working progress
Go to the top of the page
 
+Quote Post
Justify
post Apr 2 2008, 10:21 AM
Post #3


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
You can create a dropdown menu purely with css. and background-images.

For the current display i would recommended creating a image with all the buttons ontop of each other. Then create body class's and create a movement to show another image.

HOME - home
portfolio
contact us


So after creating your drop down menu

you can create a class for HOME
CODE
body #nav.home-page{ background: url('home.jpg') no repeat; }

body #nav.portfolio-page{ background: url('home.jpg') no repeat; background-position: 0 0 0 -30px;}

body #nav.contact-page{ background: url('home.jpg') no repeat;  background-position: 0 0 0 -60px;}


This is for 30px height buttons. Then you can style the dropdown menu as the same.
Go to the top of the page
 
+Quote Post
Ryan
post Apr 2 2008, 11:18 AM
Post #4


Rapid Squeezer
****

Group: Members
Posts: 123
Joined: 14-February 08
From: Hounslow, London
Member No.: 133
This is what I understand:

You want a single drop down menu with five links in it. On each of the five pages the menu links to, the page's section is what the menu header will be.

CODE
<p id="menu">Page
<ul>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
</ul>
</p>


CODE
#menu ul {
  display: none;
}
#menu:hover ul {
  display: block;
}


I generally use JavaScript to make popout menus work in IE6. If you need it, I'll post it for you smile.gif

This post has been edited by Ryan: Apr 2 2008, 11:18 AM


--------------------
Las Vegas Web Design | CSS Sticky Footer | Custom Checkboxes & Radio Buttons
Go to the top of the page
 
+Quote Post
unitedcraig
post Apr 2 2008, 05:19 PM
Post #5


Rapid Squeezer
****

Group: Advisors
Posts: 479
Joined: 14-February 08
From: Stockport
Member No.: 75
Thanks for your ideas smile.gif

Justify, great idea but if possible i want to avoid the use of images as much as possible smile.gif

Ryan again thanks, got what i wanted in one smile.gif

Thanks for the tips, just had another idea of how to do it. Would using php to determine what page the user is reading, and then placing an image or some text stating the current page be a good idea do you think?


--------------------

Working progress
Go to the top of the page
 
+Quote Post
Linda
post Apr 4 2008, 07:51 AM
Post #6


Co-Founder
*******

Group: Co-Founders
Posts: 2,756
Joined: 13-February 08
From: Pink House in USA
Member No.: 3
Good question Craig, why don't you post it in the PHP forum so the php smartie pants can answer it!


--------------------
Maine-ly Web Design | My Photography | Twitter ME
Check out Stumbleupon
Go to the top of the page
 
+Quote Post
jackfranklin
post Apr 4 2008, 09:21 AM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 102
Joined: 16-February 08
Member No.: 163
QUOTE (unitedcraig @ Apr 2 2008, 11:19 PM) *
Thanks for the tips, just had another idea of how to do it. Would using php to determine what page the user is reading, and then placing an image or some text stating the current page be a good idea do you think?


That's what I would do. Would be something similar to this with a few tweaks: http://jackfranklin.co.uk/single.php?contentid=22


--------------------
Jack Franklin | Eportfolio & Weblog
Go to the top of the page
 
+Quote Post
unitedcraig
post Apr 4 2008, 09:45 AM
Post #8


Rapid Squeezer
****

Group: Advisors
Posts: 479
Joined: 14-February 08
From: Stockport
Member No.: 75
Yeh that's what i was thinking, will probablt go with option considering my php knowledge wink.gif


--------------------

Working progress
Go to the top of the page
 
+Quote Post
Marc
post Apr 4 2008, 09:50 AM
Post #9


Squeeze Machine
*****

Group: Members
Posts: 573
Joined: 13-February 08
From: Scotland, UK
Member No.: 4
I've knocked something simple up in about 2 secs.. you can download the files and test: modify code to your hearts content!
Attached File(s)
Attached File  nav.php ( 1.28K ) Number of downloads: 1
Attached File  1.php ( 45bytes ) Number of downloads: 1
Attached File  2.php ( 45bytes ) Number of downloads: 0
Attached File  3.php ( 45bytes ) Number of downloads: 0
Attached File  4.php ( 45bytes ) Number of downloads: 0
 


--------------------
Thanks,
Marc
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   6 karinne 298 20th February 2008 - 06:52 PM
Last post by: Stuart
No New Posts   5 Mark 249 27th February 2008 - 04:07 PM
Last post by: delusion
No New Posts 3 Sleaklight 234 27th February 2008 - 10:26 AM
Last post by: Sleaklight
No New Posts 10 Popje 308 2nd April 2008 - 07:19 PM
Last post by: jamesicus
No New Posts 2 xkatx21x 211 27th February 2008 - 09:51 PM
Last post by: xkatx21x