TerribleDev/getdotnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding main nav element and associated effects

Browse Source
This commit is contained in:
Zlatko Knezevic
2015-07-30 23:39:18 -07:00
parent ccb84b7475
commit 5780ed58f5
8 changed files with 320 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
css/main.css
View File

@@ -111,4 +111,73 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
/* Menu stuff */
.sub-menu {
margin-top: 10px;
margin-bottom: 10px;
}
.sub-menu > a {
padding: 5px;
color: #ccc;
}
.sub-menu > a:hover {
text-decoration: none;
color: #000;
}
.main-content-slide {
position: relative;
left: 205px;
}
.nav-menu-header {
margin-top: 15px;
margin-bottom: 25px;
text-align: center;
}
.nav-menu-header > img {
/*box-shadow: 0 0 3px 3px rgba(0,0,0,0.5);*/
border: 2px solid #000;
}
.nav-menu {
position: fixed;
top: 0;
left: 0;
display: block;
border-right: 1px solid #ccc;
/*padding-right: 10px;*/
/*background-color: #eee;*/
background-color: #682079;
}
.nav-menu-collapsed {
display: none;
}
.nav-menu-expanded {
width: 200px;
height: 100%;
z-index: 100;
display: block;
box-shadow: 0 0 3px 3px rgba(0,0,0,0.5);
}
.nav-menu-content > ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
}
.nav-menu-content > ul > li > a {
display: inline-block;
padding: 20px 15px;
width: 100%;
/*border-bottom: 1px solid #aaa;*/
font-family: 'Roboto Condensed';
font-size: 15px;
color: #fff;
text-transform: lowercase;
}
.nav-menu-content > ul > li > a:hover {
background-color: #932DAB;
width: 100%;
text-decoration: none;
}

40
dotnet-user-groups.html
View File

@@ -4,6 +4,7 @@
<title>.NET Meetups in your local neighborhood</title> <title>.NET Meetups in your local neighborhood</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<script> <script>
var meetupCount = 50; var meetupCount = 50;
@@ -11,18 +12,47 @@
</script> </script>
</head> </head>
<body> <body>
<h1><img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" /> .NET Meetups in your local neighborhood</h1> <div class="nav-menu nav-menu-collapsed" id="navigationMenu">
<div class="nav-menu-header">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
</div>
<div class="nav-menu-content">
<ul>
<li><a href="install-dotnet.html">Install .NET</a></li>
<li><a href="target-dotnet-platforms.html">Target .NET Framework</a></li>
<li class="active"><a href="dotnet-user-groups.html">.NET User Group meetings</a></li>
<li><a href="help/dotnet-docs.html">.NET Docs</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="sub-menu">
<a href="#" id="menuControl"><span class="fa fa-bars"></span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>.NET Meetups in your local neighborhood</h1>
<p>This page list events for the set of .NET user group meetups from <a href="http://meetup.com">meetup.com</a> and <a href="http://communitymegaphone.com/">http://communitymegaphone.com/</a>.</p> <p class="lead">This page list events for the set of .NET user group meetups from <a href="http://meetup.com">meetup.com</a> and <a href="http://communitymegaphone.com/">http://communitymegaphone.com/</a>.</p>
<p>We also maintain a much larger list of <a href="https://twitter.com/DotNet/dotnet-user-groups">.NET meetup groups on twitter</a>. If you would like your group's events listed on either list, please contact us, on <a href="http://twitter.com/dotnet">twitter</a>.</p> <p class="lead">We also maintain a much larger list of <a href="https://twitter.com/DotNet/dotnet-user-groups">.NET meetup groups on twitter</a>. If you would like your group's events listed on either list, please contact us, on <a href="http://twitter.com/dotnet">twitter</a>.</p>
<div id="meetup-table"></div> <div id="meetup-table"></div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="meetup.js"></script> <script src="js/meetup.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="js/main.js"></script>
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

27
help/dotnet-docs.html
View File

@@ -2,12 +2,34 @@
<head> <head>
<title>.NET Framework Documentation and Resources</title> <title>.NET Framework Documentation and Resources</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/main.css" /> <link rel="stylesheet" href="../css/main.css" />
</head> </head>
<body> <body>
<div class="nav-menu nav-menu-collapsed" id="navigationMenu">
<div class="nav-menu-header">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
</div>
<div class="nav-menu-content">
<ul>
<li><a href="../install-dotnet.html">Install .NET</a></li>
<li><a href="../target-dotnet-platforms.html">Target .NET Framework</a></li>
<li><a href="../dotnet-user-groups.html">.NET User Group meetings</a></li>
<li><a href="help/dotnet-docs.html">.NET Docs</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h1><img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" /> .NET Framework Documentation and Resources</h1> <div class="sub-menu">
<a href="#" id="menuControl"><span class="fa fa-bars"></span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>.NET Framework Documentation and Resources</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@@ -68,6 +90,9 @@
</div> </div>
</div> </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/main.js"></script>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

26
index.html
View File

@@ -1,10 +1,32 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
</head> </head>
<body> <body>
<div class="nav-menu nav-menu-collapsed" id="navigationMenu">
<div class="nav-menu-header">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
</div>
<div class="nav-menu-content">
<ul>
<li><a href="install-dotnet.html">Install .NET</a></li>
<li><a href="target-dotnet-platforms.html">Target .NET Framework</a></li>
<li class="active"><a href="dotnet-user-groups.html">.NET User Group meetings</a></li>
<li><a href="help/dotnet-docs.html">.NET Docs</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="sub-menu">
<a href="#" id="menuControl"><span class="fa fa-bars"></span></a>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" /> <img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
@@ -28,6 +50,7 @@
<!--</ul>--> <!--</ul>-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
</div>
</div> </div>
<footer class="main-footer"> <footer class="main-footer">
<ul class="footer-nav"> <ul class="footer-nav">
@@ -38,5 +61,8 @@
</ul> </ul>
<p>The source for this site is hosted @ <a href="https://github.com/microsoft/getdotnet">microsoft/getdotnet</a> repo on GitHub.</p> <p>The source for this site is hosted @ <a href="https://github.com/microsoft/getdotnet">microsoft/getdotnet</a> repo on GitHub.</p>
</footer> </footer>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>
</body> </body>
</html> </html>

26
install-dotnet.html
View File

@@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<!-- <!--
__ __ _ _ _ _____ _____ __ __ _ _ _ _____ _____
@@ -17,9 +18,30 @@
--> -->
</head> </head>
<body> <body>
<div class="nav-menu nav-menu-collapsed" id="navigationMenu">
<div class="nav-menu-header">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
</div>
<div class="nav-menu-content">
<ul>
<li><a href="install-dotnet.html">Install .NET</a></li>
<li><a href="target-dotnet-platforms.html">Target .NET Framework</a></li>
<li class="active"><a href="dotnet-user-groups.html">.NET User Group meetings</a></li>
<li><a href="help/dotnet-docs.html">.NET Docs</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h1><img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" /> Install the .NET Framework</h1> <div class="sub-menu">
<a href="#" id="menuControl"><span class="fa fa-bars"></span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Install the .NET Framework</h1>
<p class="lead">You need to install the .NET Framework to run many apps on Windows. The best versions to install is the <a href="http://go.microsoft.com/fwlink/?LinkId=528259">.NET Framework 4.6</a>. Some apps may required <a href="http://go.microsoft.com/fwlink/?LinkId=330819">.NET Framework 3.5 SP1</a>. Those two versions should run nearly all .NET apps.</p> <p class="lead">You need to install the .NET Framework to run many apps on Windows. The best versions to install is the <a href="http://go.microsoft.com/fwlink/?LinkId=528259">.NET Framework 4.6</a>. Some apps may required <a href="http://go.microsoft.com/fwlink/?LinkId=330819">.NET Framework 3.5 SP1</a>. Those two versions should run nearly all .NET apps.</p>
</div> </div>
</div> </div>
@@ -35,8 +57,10 @@
<p class="lead">Developers may want to check out <a href="target-dotnet-platforms.html">Targeting Dotnet Platforms</a> and <a href="targeting-dotnet-versions.html">Targeting .NET Framework Versions</a> to learn more about targeting .NET Framework versions.</p> <p class="lead">Developers may want to check out <a href="target-dotnet-platforms.html">Targeting Dotnet Platforms</a> and <a href="targeting-dotnet-versions.html">Targeting .NET Framework Versions</a> to learn more about targeting .NET Framework versions.</p>
</div> </div>
</div> </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>
<script> <script>
document.title = "Install .NET Framework Versions"; document.title = "Install .NET Framework Versions";
$(document).ready(function() { $(document).ready(function() {

24
js/main.js Normal file
View File

@@ -0,0 +1,24 @@
(function ($) {
var Menu = function() {
this.openClass = "nav-menu-expanded";
this.closedClass = "nav-menu-collapsed";
$("#menuControl").click(this.openMenu);
}
Menu.prototype.openMenu = function() {
var openClass = "nav-menu-expanded";
var closedClass = "nav-menu-collapsed";
console.log("In the open menu function");
var currentState = $("#navigationMenu").hasClass(openClass);
console.log("State of the menu: " + currentState);
if (currentState) {
$("#navigationMenu").removeClass(openClass).addClass(closedClass);
$(".main-content").removeClass("main-content-slide");
}else {
$("#navigationMenu").removeClass(closedClass).addClass(openClass);
$(".main-content").addClass("main-content-slide");
}
}
new Menu();
})($);

0
meetup.js → js/meetup.js
View File

32
target-dotnet-platforms.html
View File

@@ -4,6 +4,7 @@
<title>Targeting .NET Platforms</title> <title>Targeting .NET Platforms</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -17,8 +18,30 @@
--> -->
</head> </head>
<body> <body>
<div class="nav-menu nav-menu-collapsed" id="navigationMenu">
<h1><img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg"/> Targeting .NET Platforms</h1> <div class="nav-menu-header">
<img src="http://i.microsoft.com/net/images/chrome/net-logo.jpg" />
</div>
<div class="nav-menu-content">
<ul>
<li><a href="install-dotnet.html">Install .NET</a></li>
<li><a href="target-dotnet-platforms.html">Target .NET Framework</a></li>
<li class="active"><a href="dotnet-user-groups.html">.NET User Group meetings</a></li>
<li><a href="help/dotnet-docs.html">.NET Docs</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="row">
<div class="col-md-12">
<div class="sub-menu">
<a href="#" id="menuControl"><span class="fa fa-bars"></span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Targeting .NET Platforms</h1>
<p class="lead">You can build apps for many platforms and services by downloading .NET Framework targeting packs and SDKs and using them with Visual Studio. Check out the <a href="http://blogs.msdn.com/b/dotnet/archive/tags/announcement/">.NET Framework blog</a> for information on new releases.</p> <p class="lead">You can build apps for many platforms and services by downloading .NET Framework targeting packs and SDKs and using them with Visual Studio. Check out the <a href="http://blogs.msdn.com/b/dotnet/archive/tags/announcement/">.NET Framework blog</a> for information on new releases.</p>
@@ -31,8 +54,13 @@
</div> </div>
<p class="lead">Note: These SDK and .NET Framework downloads may update Visual Studio and the .NET Framework on your machine.</p> <p class="lead">Note: These SDK and .NET Framework downloads may update Visual Studio and the .NET Framework on your machine.</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>
<style> <style>
td:first-child {width: 40%;} td:first-child {width: 40%;}
h1 {padding-top: 10px;} h1 {padding-top: 10px;}