jQuery Multi Level CSS Menu #2

**douza** · 07-04-2010, 09:57 PM

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: I am wanting to place the time and date in the menu bar which I have done but I cannot seem to get it to align on the right and valign center. Any ideas how to do this? Im sure its simple but Ive tried lots of different things. My website is http://www.laserscanning.org.uk

Code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/aboutus.php">About Us</a></li>
<li><a href="/advertise.php">Advertise</a></li>
<li><a href="/books.php">Books</a></li>
<li><a href="/businesscards.php">Business Cards</a></li>
<li><a href="/contactus.php">Contact Us</a></li>
<li><a href="/events.php">Events</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="#">Links</a>
  <ul>
  <li><a href="/links_sponsors.php">Sponsors</a></li>
  <li><a href="/links_organisations.php">Organisations</a></li>
  <li><a href="/links_education.php">Education</a></li>
  </ul>
</li>
<li><a href="/news.php">News</a></li>
<li><script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date
year=today.getYear(); // Get the year
if(year<1000) year+=1900
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)
month=today.getMonth()+1; // Get the month

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

// Write date
document.write(dayName[day] + " " + date + suffix + " " + monthName + " " + year);
</script>
</li>

<!--
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Folder 1.1</a>
    <ul>
    <li><a href="#">Sub Item 1.1.1</a></li>
    <li><a href="#">Sub Item 1.1.2</a></li>
    </ul>
  </li>
  </ul>
</li>
-->

</ul>
<br style="clear: left">
</div>

**azoomer** · 07-05-2010, 12:57 AM

Hi. I can't be sure if this will work, but you could try to put a div around the script like this with an id name clock

Code:

<div id="clock">
<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date
year=today.getYear(); // Get the year
if(year<1000) year+=1900
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)
month=today.getMonth()+1; // Get the month

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

// Write date
document.write(dayName[day] + " " + date + suffix + " " + monthName + " " + year);
</script>
</div>

and then put this css in the head section of the page

Code:

<style type="text/css">
#clock {
    margin-right:14px;
    margin-top:3px;
    text-align:right;
}
</style>

If it works at all you will probably need to adjust it a little.
edit: Looking at it again I am thinking that it may also be enough to add the id clock to the <li> surrounding the script ( <li id="clock> script</li>). The div could maybe give some other layout problems ?

**douza** · 07-05-2010, 09:44 PM

Hi azoomer

The following code did not work but thanks for helping out. I also tried the div but like you said it put the date on a new line below.

Code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/aboutus.php">About Us</a></li>
<li><a href="/advertise.php">Advertise</a></li>
<li><a href="/books.php">Books</a></li>
<li><a href="/businesscards.php">Business Cards</a></li>
<li><a href="/contactus.php">Contact Us</a></li>
<li><a href="/events.php">Events</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="#">Links</a>
  <ul>
  <li><a href="/links_sponsors.php">Sponsors</a></li>
  <li><a href="/links_organisations.php">Organisations</a></li>
  <li><a href="/links_education.php">Education</a></li>
  </ul>
</li>
<li><a href="/news.php">News</a></li>
<li id="clock"><script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date
year=today.getYear(); // Get the year
if(year<1000) year+=1900
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)
month=today.getMonth()+1; // Get the month

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

// Write date
document.write(dayName[day] + " " + date + suffix + " " + monthName + " " + year);
</script>
</li>

Code:

.jqueryslidemenu{
font: bold 12px Verdana;
background: silver;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: silver; /*background of tabs (default state)*/
color: white;
padding: 6px 8px;
border-right: 1px solid #87BF3C;
color: #87BF3C;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #7AA01E; /*tab link background during hover state*/
color: white;
text-decoration: none;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px #87BF3C;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

.clock{
margin-right:14px;
margin-top:3px;
text-align:right;
vertical-align:middle;
}

**azoomer** · 07-05-2010, 11:20 PM

the css you wrote is referring to a class ( .clock)

Code:

.clock{
margin-right:14px;
margin-top:3px;
text-align:right;
vertical-align:middle;
}

It must be like this #clock if it should target the id="clock"
But anyway there is something I don't understand. On your page it seems like the date is written outside the list, like this.
<li id="clock"></li> Tuesday 6th July 2010
Is there more to the clockscript than what you have posted ?
As it is now you can push it to the right if you change the .clock to #clock, but you can't affect the vertical alignment. Somehow you need to get the written date inside the list tags to do that.

**douza** · 07-06-2010, 07:22 PM

Hi azoomer,

I have now changed the .clock to #clock but that still did not work. I have pasted the entire header.php below and the red bit is the date script which is between the <li> and </li>.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="imagetoolbar" content="no">
<meta name="resource-type" content="document">
<meta name="distribution" content="global">
<meta name="copyright" content="The Laser Scanning Forum 2010">
<meta name="description" content="The Laser Scanning Forum is an international non-profit, voluntary consensus standards organisation that is leading the development of standards for 3D laser scanning services. (TLSF) is devoted to the development of international cooperation for the advancement of knowledge, research, development and education in the 3D Laser Scanning.">
<meta name="keywords" content="terrestrial laser scanning,laser scanning,3d,laser,scanning,hds,leica,hds3000,scanstation,photogrammetry,forum,volume calculations,modeling,3D laser scanning,architectural facade measurement,surveying,pipe Modelling,cyrax,cyclone,3d laser scanner,geomatics,survey,tsa,leica calibration,pointools,met surveys,scanning forum,hds group,laser forum,laser scanning forum,tru view,leica user group,data store,">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<title>The Laser Scanning Forum - We offer all the benefits to measurement professionals.</title>

<link type="text/css" href="http://www.laserscanning.org.uk/css/stylesheet.css" rel="stylesheet"  media="all">
<link type="image/vnd.microsoft.icon" href="http://www.laserscanning.org.uk/images/laserscanning.ico" rel="shortcut icon">

<script type="text/javascript" src="http://www.laserscanning.org.uk/css/bumpbox/mootools.js"></script>
<script type="text/javascript" src="http://www.laserscanning.org.uk/css/bumpbox/bumpbox.js"></script>
<script type="text/javascript" src="http://www.laserscanning.org.uk/css/bumpbox/flowplayer.min.js"></script>
<script type="text/javascript" src="mobiquo/tapatalkdetect.js"></script>
<script type="text/javascript" src="http://www.linkedin.com/js/public-profile/widget-os.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.laserscanning.org.uk/css/jqueryslidemenu.js"></script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4563742-1");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>

<!-- For Business CardsPage Start -->
<script type="text/javascript" src="swfobject.js">
</script>
<style type="text/css">
/*<![CDATA[*/
        /* hide from ie on mac \*/
        html {
                height: 100%;
                overflow: hidden;
        }

        #flashcontent {
                height: 100%;
        }
        /* end hide */

        body {
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: #000000;
                color:#ffffff;
                font-family:sans-serif;
                font-size:40;
        }

        a {
                color:#cccccc;
        }
/*]]>*/
</style>
<!-- For Business CardsPage End -->

<!-- Start Menu Javascript -->
<link rel="stylesheet" type="text/css" href="http://www.laserscanning.org.uk/css/jqueryslidemenu.css">

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<!-- End Menu Javascript -->

</head>

<body style="background-color:#87BF3C">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">

          <tr>
            <td align="left" valign="top"><img src="http://www.laserscanning.org.uk/images/header_top5.gif" alt="" width="1000" height="23"></td>
          </tr>

          <tr>
            <td align="left" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="6" align="left" valign="top" class="body_left_bg">&nbsp;</td>
                <td align="left" valign="top" class="header_image_box"><table width="978" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="left" valign="top" class="header_image"></td>
                  </tr>

                </table></td>
                <td width="6" align="left" valign="top" class="body_right_bg"></td>
              </tr>
              <tr>
                <td align="left" valign="top" class="body_left_bg">&nbsp;</td>
                
<td align="left" valign="top" class="menu_bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/aboutus.php">About Us</a></li>
<li><a href="/advertise.php">Advertise</a></li>
<li><a href="/books.php">Books</a></li>
<li><a href="/businesscards.php">Business Cards</a></li>
<li><a href="/contactus.php">Contact Us</a></li>
<li><a href="/events.php">Events</a></li>
<li><a href="/forum">Forum</a></li>
<li><a href="#">Links</a>
  <ul>
  <li><a href="/links_sponsors.php">Sponsors</a></li>
  <li><a href="/links_organisations.php">Organisations</a></li>
  <li><a href="/links_education.php">Education</a></li>
  </ul>
</li>
<li><a href="/news.php">News</a></li>
<li id="clock"><script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date
year=today.getYear(); // Get the year
if(year<1000) year+=1900
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)
month=today.getMonth()+1; // Get the month

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

// Write date
document.write(dayName[day] + " " + date + suffix + " " + monthName + " " + year);
</script></li>

<!--
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Folder 1.1</a>
    <ul>
    <li><a href="#">Sub Item 1.1.1</a></li>
    <li><a href="#">Sub Item 1.1.2</a></li>
    </ul>
  </li>
  </ul>
</li>
-->

</ul>
<br style="clear: left">
</div>


</tr>
</table>
</td>
                <td align="left" valign="top" class="body_right_bg">&nbsp;</td>
              </tr>
            </table></td>
          </tr>

        </table></td>
      </tr>
      <tr>
        <td align="left" valign="top"><table width="1000" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="8" align="left" valign="top" class="body_left_bg"></td>
            <td align="left" valign="top" class="body_text_box">
<!-- End of Header -->

Thread: jQuery Multi Level CSS Menu #2

Thread Tools

Search Thread

jQuery Multi Level CSS Menu #2

Bookmarks

Bookmarks

Posting Permissions