Difference between revisions of "Template:Newcastle"

Line 1: Line 1:
 
<html>
 
<html>
−
 
+
<!doctype html>
 +
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
 +
<!--[if IE 7 ]>   <html lang="en" class="ie7"> <![endif]-->
 +
<!--[if IE 8 ]>   <html lang="en" class="ie8"> <![endif]-->
 +
<!--[if IE 9 ]>   <html lang="en" class="ie9"> <![endif]-->
 +
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
 +
<head>
 +
<meta name="viewport" content="width = 1050, user-scalable = no" />
 +
<meta charset="utf-8">
 +
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
 +
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
 +
<script type="text/javascript" src="../../lib/turn.min.js"></script>
 +
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 +
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 +
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
 +
</head>
 
<style>
 
<style>
  
Line 12: Line 28:
 
      
 
      
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
−
/* Wrapper for the menu */
 
−
.menu_wrapper {
 
−
width:150px;
 
−
height:100vh;
 
−
position:fixed;
 
−
padding:0px;
 
−
float:left;
 
−
background-color:#f2f2f2;
 
−
text-align:left;
 
−
}
 
−
 
−
/* styling for the menu items */
 
−
.menu_item {
 
−
width:100%;
 
−
margin:-2px 0px 0px -20px;
 
−
padding: 10px 10px; 
 
−
border-bottom: 1px solid #d3d3d3;
 
−
font-weight:bold;
 
−
color:#000000;
 
−
cursor: pointer;
 
−
}
 
−
 
−
/* when hovering on a menu item */
 
−
.menu_item:hover {
 
−
color:#000000;
 
−
background-color: #72c9b6;
 
−
}
 
−
 
−
/* decoration icon for the menu buttons*/
 
−
.icon {
 
−
float:right; 
 
−
font-size:16px;
 
−
font-weight:bold;
 
−
}
 
 
 
−
/* this is the icon for when the content is collapsed */
+
.navbar-brand{
−
.plus::before {
+
font-family: 'Kaushan Script', cursive;
−
content: "+";
+
font-size: 30px;
−
}
+
color: #F1594B;  
−
/* this is the icon for when the content is expanded */
+
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
−
.less::before {
+
}
−
content: "–";
+
−
}
+
−
 
+
−
/* styling for the ul that creates the buttons */
+
−
ul.menu_items {
+
−
width:100%;
+
−
margin-left:0px;
+
−
padding:0px;
+
−
list-style: none;  
+
−
}
+
−
 
+
−
/* styling for the li that are the menu items */
+
−
.menu_items li {
+
−
width:90%;
+
−
margin-top:-2px;
+
−
padding: 15px 0px 15px 15px ;
+
−
display:block;
+
−
border-bottom: 1px solid #d3d3d3; 
+
−
text-align:left;
+
−
font-weight:bold;
+
−
text-decoration:none;
+
−
color:#000000;  
+
−
list-style-type:none;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
−
}
+
−
 
+
−
.menu_item a {
+
−
width: 100%;
+
−
margin-left: -20px;
+
−
padding: 11px 90px 12px 20px;
+
−
text-decoration: none;
+
−
color:black;
+
−
}
+
  
−
/* When hovering on a menu item */
+
.main-logo {
−
.menu_items li:hover {  
+
  position:relative;
−
background-color:#72c9b6;
+
  top: 8px;
−
color: #000000;
+
}
−
}
+
  
−
/* styling for the submenus */
+
.navbar {  
−
.submenu {
+
background-color: #EFE6C5;
−
width:100%;  
+
border-style: none;
−
display: none;
+
}
−
font-weight:bold;
+
−
cursor:pointer;
+
  
−
}
+
.navbar-nav {
 +
font-family: 'Kaushan Script', cursive;
 +
font-size: 25px;
 +
        color: #F1594B;
  
−
/* moving the margin for the submenu ul list */
+
}
−
ul.submenu {  
+
.navbar-nav, a:visited {
−
width: 100%;
+
    color: #F1594B;
−
margin: 10px 0px -11px 0px;
+
}
−
list-style: none;
+
.navbar-nav li a:hover{
−
}
+
background-color: #F59289;  
 +
color: #FFF;
 +
}
  
−
/*styling for the submenu buttons */
+
li a:hover, .dropBox:hover .menuDropBox{
−
.submenu li {  
+
background-color: #F59289;
−
width: 100%;
+
color: #FFF;
−
margin-left: 10px;
+
}
−
margin-bottom: 0px;
+
−
}
+
  
 +
li a, .menuDropBox {
 +
color: #F1594B;
 +
}
  
−
/* hover state for the submenu buttons */
+
li.dropBox {
−
.submenu li a {
+
    display: inline-block; /* this controlds the drop boxes position*/
−
width: 100%;
+
position:relative;
−
padding: 5px 10px;
+
z-index: 2
−
display: inline-block;
+
}
−
border-bottom: 1px solid #d3d3d3;
+
−
background-color:white;
+
−
text-decoration:none;
+
−
color:#000000;
+
−
}
+
  
 +
.db {
 +
    position: absolute; /* this controls the size, position and colours of the elements within the dropbox */
 +
left:0px;
 +
    background-color: #F59289;
 +
width: 160px;
 +
display:none;
 +
}
  
 +
.db a {
 +
    color: #FFF; /* this controls the text for the elements that appear in the dropbox*/
 +
font-family: 'Kaushan Script', cursive;
 +
font-size: 15px;
 +
    padding: 12px 0px 12px 20px;
 +
    display: block;
 +
    text-align: left;
 +
}
  
−
.submenu li a:hover {
+
.db a:hover {background-color: #000} /*block is displayed when the user hovers over it */
−
background-color:#000000;
+
−
color: #72c9b6;
+
−
}
+
  
 +
.dropBox:hover .db {
 +
    display: block;
 +
}
  
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
.fbimage {
−
.collapsable_menu_control {  
+
  position:relative;
−
width:100%;  
+
  left: 17px;
−
padding: 15px 0px;
+
  top: 5px;
−
display:none;
+
}
−
background-color:#000000;
+
−
text-align:center; 
+
−
font-weight:bold;
+
−
color:#72c9b6;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
−
}
+
  
−
/* when hovering on that button */
+
.twitterimage {
−
.collapsable_menu_control:hover {  
+
  position:relative;
−
background-color: #72c9b6;
+
  left: 20px;
−
color:#000000;
+
  top: 0px;
−
}
+
}
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/

Revision as of 14:15, 24 June 2016

MENU ▤