/    Sign up×
Community /Pin to ProfileBookmark

days of the week menu

Copy linkTweet thisAlerts:
May 10.2005

Hi All

My first post here. I am a web designer, but I have been called upon to produce some script.

I am after a ‘days of the week’ menu, which will expand/collapse using on click to show what is happening on a particular day. That I believe I could produce with CSS, but I also require the menu to be defaulted (to expand) for the day of the week the user logs on.

I currently have a <ul> showing the days of the week, with a sublist set to display:none for each day.

Can anyone advise me of the best place to look or how I may start coding what I need.

Any help greatfully accepted.

Regards

Langster

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMay 11.2005 — Cen you show us the ul/li list with your sublist menus to work on it?
Copy linkTweet thisAlerts:
@langsterauthorMay 11.2005 — Thanks for the reply Kor

Here is my code with CSS. Currently the sub menus are set to display:none.

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>

body {

font-family: Arial, Helvetica, sans-serif;

padding:0px;

margin:0px;

font-size:75%;

text-align:center;

}

#container {

width:800px;

border:1px solid #333;

margin:0px auto;

text-align:left;

}

#body {

border-top:1px solid #fff;

border-bottom:1px solid #fff;

height:290px;

background-color:#000;

}

ul, li, ul ul, ul li, h5, h6 {

list-style: none;

margin: 0;

padding: 0;

}

#navigation2 {

width: 140px;

float:right;

}

#navigation2 a, #navigation2 a:hover {

display:block;

text-decoration:none;

height:14px;

font-weight:bold;

padding: 3px 0 5px 25px ! important;

padding: 3px 0 4px 25px;

bxackground: url(../images/dow_BGRD2.gif) no-repeat;

border:1px solid #fff;

color:#fff;

margin-left:20px;

}

#navigation2 li a:hover {

background:#fff;

color:#000;

}

#navigation2 ul ul#mon, #navigation2 ul ul#tue, #navigation2 ul ul#wed, #navigation2 ul ul#thur, #navigation2 ul ul#fri, #navigation2 ul ul#sat, #navigation2 ul ul#sun {

display:none;

}

#navigation2 ul ul li {

padding: 0px;

margin: 0px;

background-color:#fff;

width:101px;

margin-left:31px ! important;

margin-left:33px;

border-right:1px solid #000;

border-left:1px solid #000;

}

#navigation2 ul ul li p{

margin:0px 0px 10px 0px;

}

</style>

</head>

<body>

<div id="container">

<div id="body">

<div id="navigation2">

<ul>

<li><a href="#">Monday</a>

<ul id="mon">

<li>sub menu<br /></li>

</ul>

</li>

<li><a href="#">Tuesday</a>

<ul id="tue">

<li>sub menu<br /></li>

</ul>

</li>

<li><a href="#">Wednesday</a>

<ul id="wed">

<li>sub menu</li>

</ul>

</li>

<li><a href="#">Thursday</a>

<ul id="thur">

<li>sub menu</li>

</ul>

</li>

<li><a href="#">Friday</a>

<ul id="fri">

<li>sub menu</li>

</ul>

</li>

<li><a href="#">Saturday</a>

<ul id="sat">

<li>sub menu</li>

</ul>

</li>

<li><a href="#">Sunday</a>

<ul id="sun">

<li>sub menu</li>

</ul>

</li>

</ul>

</div>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@KorMay 11.2005 — [code=php]
<script type="text/javascript">
var today = new Date();
var wday = today.getDay();//the day of the week
if(wday==0){wday=7}//correction as by default Sunday=0
function displaySub(){
var aU = document.getElementById('navigation2').getElementsByTagName('ul');//the <ul> elements collection
aU[wday].style.display='inline';
}
onload = displaySub;
</script>
[/code]
Copy linkTweet thisAlerts:
@KorMay 11.2005 — it will work according to the [i]user's[/i] computer internal clock...
Copy linkTweet thisAlerts:
@langsterauthorMay 11.2005 — Hi Kor

That seems to have worked fantastic. Many thanks for that.

Just a quick question, would this also work on a Mac ? I dont have the facilities to test this out.

Once again thanks a lot.

Langster
Copy linkTweet thisAlerts:
@KorMay 11.2005 — it is a simple code, should work on all modern browsers (IE5+, NS6+, Moz, Safari(Mac, than), Conq...). IE4 and NS4 are the exception, but I guess that you will afford to lose the under 1%, or probably ten times less, of the users that it looks like they use those very old browsers. If you still need them, the code can be modified....
×

Success!

Help @langster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...