Mobile Friendly Website

CSSPLAY

Doing it with style

Doors drop-line three COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

T:-
Stu, very well done...I'm considering using something like this for a client utilizing a CMS called CMS Made Simple...highly suggested!

Best,
Todd
(27.01.2007, 20:56)

Merri:-
Slightly offtopic, but:

<!--[if IE]>-->
This is enough for a IE conditional comment!
<![endif]-->

So you don't need the "extra" <! characters in the first tag :)
(28.01.2007, 04:00)

Stu:-
Merri, it's there to make it 'correct'. Each open <! is closed by a >
(28.01.2007, 09:03)

Merri:-
But I strongly believe they're not going to fix the current behavior of the conditional comments in the future, because that'd break a lot of sites. Thus I personally prefer the "as short as possible" version :)
(29.01.2007, 20:52)

Stu:-
Merri, that's ok, you do it your way and I'll do it mine :)
There is an even shorter way but it doesn't validate.
(30.01.2007, 10:47)

Christoffer:-
I wonder if someone else has had the problem that it flickers and for a split second you can se the .current links when you hover over the submenus?
(09.02.2007, 19:12)

Christoffer:-
Doh, forgot to tell you that this is (if you haven't already guessed) in IE6. ;)
(09.02.2007, 19:14)

Stu:-
Christoffer, this is due to the gap between the tabs. If you do not want the flicker then get rid of the gap.
(09.02.2007, 19:31)

Mike:-
I just can't get this to work properly (still) - I've been playing with it for a couple of hours.

I must be missing something, but if I click on the "December" tab (or any other tab than the selected one), nothing happens - and yet it works in the live example on this site.

Is there somehting obvious that I'm missing??

This is a great menu - just can't get it to work for me.

Thanks,

Mike
mike@dcsdigi.com
(24.02.2007, 23:22)

Stu:-
Mike, I think you are missing the point. Normally a click on a tab will take you to a new page where you will have the clicked tab styled with 'selected'.
On my demo, to save having 12 pages, I just reload the same page and with a little php programming I write 'selected' to the clicked tab style.
(24.02.2007, 23:44)

Mike:-
OK - I was thinking that there might be a bit of missing PHP...I have used case/switch before, but this seems easier to manage.

What is the PHP script like to make the clicked tab 'selected'?

Willing to make a donation at this point!

$10 ok?

:)

Thanks for any help.

Mike
mike @ dcsdigi.com
(24.02.2007, 23:48)

Gregg:-
I am having the same problem as Mike.

Does this mean that for 12 pages I would need to have 12 different versions of the menu?

Sorry may seem like a silly question but am also a little stumped as to how to get the "clicked" state.
(25.02.2007, 08:05)

Stu:-
Mike, Greg, how would you be using this menu? Are you using an extenal menu file that is 'included' at run time using php? If so then you could use my method of using a query string at the end of the link page url.
The external file would then read this query string and using the php 'if/else' would write 'selected' into the current page style.
(25.02.2007, 09:07)

Mike:-
OK - thanks Stu - that gives me something to work with - I just need to figure out how to get the 'if/else' to write selected as part of my php case/switch. Here is a bit of what I'm talking about:

<?
switch ($page) {
case "clients":
include('clients.php');
break;
case "resources":
include('resources.php');
break;
default:
include('content_main.php');
}
?>

I guess that afer each 'include' statement above, I would have to put in the if/else statement to write 'selected' to the correct menu item.

Thanks,

Mike
(25.02.2007, 13:56)

Gregg:-
Thanks Mike

That switch code is helpful. Would you mind also sharing a sample of the if/else statement to write the "selected" section into the html/css.

Thanks
(25.02.2007, 14:09)

Stu:-
Ok, firstly I set up a 'default' selected menu then read the query string.
<?php
$current = "two";
$sub="c";
if (isset($_GET['current'])) $current = $_GET['current'];
if (isset($_GET['sub'])) $sub = $_GET['sub'];
?>

Then the if/else use:

<div id="nav">


<?php
if ($current == "one")
{
echo "<ul class=\"current\">";
}
else {
echo "<ul class=\"select\">";
}
?>
<li><a href="doors_drop_line_three.html?current=one&amp;sub=none"><b>January</b>

etc....
(25.02.2007, 14:17)

Mike:-
No problem Gregg - I'm hoping that perhaps Stu could elaborate on how to incorporate the if/else statement into the above php to work with his menu.

Given the case/switch though, I don't think we need an if/else statement in there - since each case has a defined include. I think we need to just write selected to the relative menu/submenu selection based on the case, or query that is passed back to the php script above.

We're getting closer to a solution...
(25.02.2007, 14:29)

Mike:-
Thanks Stu - I think I understand it now.

I'll have to write an if/else to handle the sub menu options as well, right? So there would be 12 if/else statements to handle the core navigation, and as many sub if/else statements as desired (4 or 5 in your example).

Or maybe what this does is keep the sub menu active for that particular 'current' menu selection, then from there you just have a/hover states for the subs - no need to if/else.

Am I right?

thanks,

Mike
(25.02.2007, 14:47)

Stu:-
You can always use the case="clients" etc to set up the included menu with the required 'selected' classes so there will be no need to use a further if/else test.
(25.02.2007, 15:32)

Mike:-
How about this - trying to get everything passed from one set of values passed by clicking the link. Since each 'current' and 'sub' has it's own link, this should work. I don't think my syntax is right though - maybe it's dot notation - not sure how to catch all that in one.

In the example below, the user clicks on the "results" sub item, which is located on the 2nd 'current' menu tab, in the 2nd 'sub' position. The default page would have the first 'current' menu item and first 'sub' item active.

Just not sure of the php syntax to do this.



<?
switch ($page&$current&$sub) {
case "results":
include('results.php?two&b');
break;
default:
include('content.php?one&a');
}
?>
}
?>
(25.02.2007, 15:57)

Mike:-
oops! Ignore the extra

}
?>
(25.02.2007, 15:59)

Gregg:-
Did that work for you mike?
I still battle with the syntax too but that logic makes sense to me.

So could I call my included nav with a querystring?

I modified Mikes example.

<?
switch ($page&$current&$sub) {
case "results":
include('nav.php?two&b');
break;
default:
include('nav.php?one&a');
}
?>
(26.02.2007, 07:38)

Mike:-
To be honest, I haven't tried it out yet - I ran out of time yesterday. The logic seems to be alright, it's just the syntax that concerns me.

I'm also fiddling with another 2 line validating css menu (or something like that) that is only CSS (no PHP)...but that one is giving me some problems too.

Basically, I need the menu to keep the current subnav active/visible, until a different top nav button is clicked.

I am at the office now, but will be working on this again this evening - I'm in Toronto, Canada, so it's 9;20am EST here - I think the time difference to the UK makes it a bit difficult to catch each other sometimes.

Good luck - I'll post any breakthroughs later.

Mike
(26.02.2007, 14:22)

Gregg:-
Hi Stu

I am still battling to get this working properly... would it be possible to get a sample with the php and css in? I would be prepared to make a donation for the time.

Thanks
gregg-at-iaminawe-dot-com
(14.04.2007, 20:38)

Mark:-
I see your bottom level links are positioned absolutely. My whole page will be centered, so positioning absolutely won't work. Is there a work around this that still uses ul's? Or do I have to use div's?
(28.06.2007, 13:16)

Stu:-
Mark, the #nav is position relative (which can be centered). The absolute position of the drop line is relative to this so will still work.
(01.07.2007, 21:09)

Sean Cotter:-
I've noticed that removing the bold styling around each month name causes the top part of the menu to lose the rest of its styling, running all the words together. Perhaps this is caused by other changes I'm making, but even so it seems odd. Is this an issue you're aware of? If so, any advice?

I got the PHP stuff working fine with my modified version of this sample, but haven't been able to solve this particular style problem.

Your site is a wonderful resource. Some day I hope to use some of your code in my redesign of my wife's site (warnerphoto.com), but it's a big project and will take a while.
(28.08.2007, 13:55)

Kevin:-
if I use as a ssi include, the menu wraps and the spacing between menu items is way off. Any thoughts?
(29.08.2007, 20:26)

Kevin:-
Nevermind. Had a conflicting stylesheet.
(29.08.2007, 20:55)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page