Test Page

Website creation

by Neil Daley

HTML

<!DOCTYPE html>

<!--
	Neil Daley Website
	Project for Neil Daley, Associates of Science in
		Computer Programming and Systems Analysis.
	
	
	Main Web Page
	Author: Neil Daley
	Date: 7/30/2018
	
	Filename: index.html
	Supporting files: neilbio.css, header.js
	www.webtechneil.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

<link href="./css/MySite.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="./js/MySite.js"></script>

<div class="topnav">
  
  <ul id="logo">
    <li>
        <a href="#">Neil Daley</a>
    </li>
  </ul>
    
<ul id="sddm">
    
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">Projects</a>
        <a href="#">Contact</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Projects</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Server-side</a>
        <a href="#">Pulldown navigation</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading </a>
        </div>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
</div>

<!--
    <div class="topnav">
      
      <div class="topnav-centered">
          <a href="#">Home</a>
          <a href="#">Projects</a>
          <a href="#">Contact</a>
      </div>
               
      <div >
          <a id="logo" href="#">Neil Daley</a>
      </div>
          
      <div class="topnav-right">
          <a target="_blank" title="follow me on Twitter" href="http://www.twitter.com/LuvtechnologyND"><img alt="follow...

CSS

@import
url(https://fonts.googleapis.com/css?family=Great+Vibes);

/* Target the entire Nav
nav {
  width: 100%;
  height: 48px;
}

div {
  width: 100%;
  height: 300px;
  margin-top: 0;
}

h1 {
  margin: 0px;
}

/* Target a specific tab
nav a {
  display: block;
  float: left;
  */

  /* Font settings
  font-family: sans-serif;
  font-size: 10px;
  color: black;

  /* Box method setup
  border: 0px solid #000;

  /* Box padding
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;

  /* Remove link decoration
  text-decoration: none;
  overflow: hidden;
}

/* Change background color during hover over 'a tab'
nav a:hover {
  color: #0b98de;
}
*/

/* Target the logo */
#logo {
  background-color: #ADD8E6;
  font-family: "Great Vibes";

  /*
  font-size: 30px;
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px #c4c4c4;
  */

  /* Box */
  padding-left: 20px;
  padding-right: 10px;
  margin-right: 640px;
  margin-top: -10px;
  overflow: hidden;
}

#logo li {
  margin: 0 1px 0 0;
	padding: 4px 0px;
  text-align: left;
  font-size: 30px;
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px #c4c4c4;
  height: 33px;
  display: block;
  text-decoration: none;

  /*
	padding: 4px 10px;
	width: 80px;
	background: #5970B2;
	color: #FFF;
	text-align: left;
  */
}

#logo li a {
  text-decoration: none;
}

/*
body {
  margin: 0;
}

.topnav {
  position: relative;
  overflow: hidden;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 8px 10px;

  /*
  padding: 14px 16px;
  

  text-decoration: none;
  margin-top: -20px;

  /* Font settings 
  font-family: sans-serif;
  font-size: 12px;
  color: black;
}

.topnav a:hover {
  color: #0b98de;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  top: 20px;
  left: 40%;
  transform: translate(-50%, -50%);
  position: relative;
}

.topnav-right {
  float: right;
}

/* Responsive navigation menu (for mobile devices) 
@media screen and...

JavaScript

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id) {
  // cancel close timer
  mcancelclosetime();

  // close old layer
  if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';

  // get new layer and show it
  ddmenuitem = document.getElementById(id);
  ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose() {
  if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime() {
  closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime() {
  if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

// close layer when click-out
document.onclick = mclose;