SHARE
TWEET

The Fancy Web Site Menu (Without JavaScript)

Phr0zen_Penguin Aug 29th, 2014 220 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <!--------------------------------------------------------------------------------------------------
  4.  --------------------------------------------------------------------------------------------------
  5.  [fancy_menu.html]
  6.         Get fancy interractive menu effects using just CSS (without having to resort to JavaScript).
  7.  
  8.                 (c) Damion 'Phr0z3n.dev' Tapper, 2014.
  9.                 Email: Phr0z3n.Dev@Gmail.com
  10.  --------------------------------------------------------------------------------------------------
  11.  --------------------------------------------------------------------------------------------------->
  12.  
  13. <html>
  14.         <head>
  15.  
  16.                 <title>
  17.                         Phr0z3n.Dev's Fancy Menu System
  18.                 </title>
  19.  
  20.                 <style type="text/CSS">
  21.                         body{
  22.                                 font-family: helvetica;
  23.                                 font-size: 11pt;
  24.                         }
  25.                         h1{
  26.                                 margin: 0px;
  27.  
  28.                                 font-family: verdana;
  29.                                 font-size: 16pt;
  30.                                 text-align: center;
  31.                         }
  32.  
  33.                         /***************************************************************************************
  34.                          * This bit is just for presentation and tidyness so it is not relevant to pay attention
  35.                          * to this section.
  36.                          ****************************************************************************************/
  37.                         #mainDiv{
  38.                                 width: 800px;
  39.                                 height: 600px;
  40.  
  41.                                 position: absolute;
  42.  
  43.                                 border: 2px solid rgb(0, 128, 0);
  44.                                 border-radius: 20px;
  45.  
  46.                                 left: 50%;
  47.                                 margin-left: -400px;
  48.  
  49.                                 top: 50%;
  50.                                 margin-top: -300px;
  51.                         }
  52.  
  53.                         /***************************************************************************************
  54.                          * This bit addresses the matter at hand:
  55.                          *
  56.                          * Menu div Formatting
  57.                          ****************************************************************************************/
  58.                         #menuDiv{
  59.                                 /*
  60.                                  * Set the dimensions and other relevant styling attributes.
  61.                                  */
  62.                                 width: 150px;
  63.                                 float: left;
  64.  
  65.                                 border: 2px solid rgb(0, 128, 0);
  66.                                 border-top: 0px;
  67.                                 border-left: 0px;
  68.                                 border-radius: 20px;
  69.  
  70.                                 background-color: rgb(255, 255, 255);
  71.                         }
  72.  
  73.                         /***************************************************************************************
  74.                          * Menu Inner Contents Formatting
  75.                          ****************************************************************************************/
  76.                         /**
  77.                          * Menu horizontal separator formatting
  78.                          **/
  79.                         #menuDiv hr{
  80.                                 width: 90%;
  81.  
  82.                                 color: rgb(0, 128, 0);
  83.                                 border: 1px solid;
  84.                                 margin: 1px;
  85.                                 margin-left: auto;
  86.                                 margin-right: auto;
  87.                         }
  88.  
  89.                         /**
  90.                          * General div formatting
  91.                          **/
  92.                         #menuDiv div{
  93.                                 padding-top: 6px;
  94.                                 padding-bottom: 6px;
  95.                
  96.                                 color: rgb(0, 0, 128);
  97.  
  98.                                 text-align: center;
  99.                                 font-family: helvetica;
  100.                                 font-weight: bold;
  101.                         }
  102.  
  103.                         /**
  104.                          * Clip the relevant edges
  105.                          **/
  106.                         #menuDiv div:first-child{
  107.                                 border-top-left-radius: 20px;
  108.                                 border-top-right-radius: 20px;
  109.                         }
  110.                         #menuDiv div:last-child{
  111.                                 border-bottom-left-radius: 20px;
  112.                                 border-bottom-right-radius: 20px;
  113.                         }
  114.  
  115.                         /**
  116.                          * Add alternating coloring
  117.                          **/
  118.                         #menuDiv div:nth-child(even){
  119.                                 background-color: rgb(224, 255, 255);
  120.                         }
  121.                         #menuDiv div:nth-child(odd){
  122.                                 background-color: rgb(170, 255, 255);
  123.                         }
  124.  
  125.                         /**
  126.                          * Menu hover effect formatting
  127.                          **/
  128.                         #menuDiv div:hover{
  129.                                 background-color: rgb(32, 196, 196);
  130.                         }
  131.  
  132.                         /**
  133.                          * Menu hyperlinks formatting
  134.                          **/
  135.                         #menuDiv a{
  136.                                 color: rgb(0, 0, 128);
  137.                         }
  138.                         #menuDiv a:hover{
  139.                                 color: rgb(245, 245, 220);
  140.                         }
  141.  
  142.                         /***************************************************************************************
  143.                          * Web Site Contents div Formatting
  144.                          ****************************************************************************************/
  145.                         #contentDiv{
  146.                                 width: 638px;
  147.                                 height: 562px;
  148.  
  149.                                 float: right;
  150.  
  151.                                 border-left: 2px solid rgb(0, 128, 0);
  152.                                 border-radius: 20px;
  153.  
  154.                                 padding: 4px;
  155.  
  156.                                 color: rgb(0, 0, 64);
  157.                         }
  158.  
  159.                         /***************************************************************************************
  160.                          * Site iIfo div Formatting
  161.                          ****************************************************************************************/
  162.                         #siteInfoDiv{
  163.                                 float: left;
  164.  
  165.                                 width: 152px;
  166.                                 height: 300px;
  167.  
  168.                                 margin-top: 52px;
  169.  
  170.                                 border-bottom: 2px solid rgb(0, 128, 0);
  171.                                 border-radius: 20px;
  172.  
  173.                                 font-size: 10pt;
  174.                         }
  175.                         #siteInfoHeaderDiv{
  176.                                 padding-top: 4px;
  177.                                 padding-bottom: 4px;
  178.  
  179.                                 font-family: verdana;
  180.                                 font-weight: bold;
  181.                                 text-align: center;
  182.                                 color: rgb(245, 245, 220);
  183.  
  184.                                 border-top: 2px dashed rgb(0, 128, 0);
  185.                                 border-bottom: 2px dashed rgb(0, 128, 0);
  186.                                 border-radius: 10px;
  187.  
  188.                                 background-color: rgb(0, 64, 0);
  189.                         }
  190.                         #siteInfoBodyDiv{
  191.                                 padding: 4px;
  192.                                 color: rgb(0, 128, 128);
  193.                         }
  194.  
  195.                         /***************************************************************************************
  196.                          * Footer div(s) Formatting
  197.                          ****************************************************************************************/
  198.                         #footerDiv{
  199.                                 clear: both;
  200.  
  201.                                 border: 0px;
  202.                                 padding: 0px;
  203.                                 margin: 0px;
  204.                         }
  205.                         #footerDiv div{
  206.                                 text-align: center;
  207.  
  208.                                 border-top: 2px solid rgb(0, 128, 0);
  209.                                 border-radius: 20px;
  210.                                 padding-top: 4px;
  211.                                 padding-bottom: 4px;
  212.                         }
  213.                         #footerDiv div:hover{
  214.                                 background-color: rgb(32, 224, 224);
  215.  
  216.                                 font-weight: bold;
  217.  
  218.                                 border-bottom: 2px solid rgb(0, 128, 0);
  219.                         }
  220.                         #supportDiv{
  221.                                 float: left;
  222.                                 width: 267px;
  223.                         }
  224.                         #contactsDiv{
  225.                                 float: right;
  226.                                 width: 266px;
  227.                         }
  228.                         #affiliatesDiv{
  229.                                 float: right;
  230.                                 width: 267px;
  231.                         }
  232.  
  233.                         /***************************************************************************************
  234.                          * Misc Formatting
  235.                          ****************************************************************************************/
  236.                         /**
  237.                          * General document hyperlink formatting
  238.                          **/
  239.                         a{
  240.                                 text-decoration: none;
  241.                         }
  242.                         a:hover{
  243.                                 color: rgb(0, 128, 0);
  244.                         }
  245.                 </style>
  246.  
  247.                 <!-- For the sake of the adventurous -->
  248.                 <script type="text/JavaScript">
  249.                 </script>
  250.  
  251.         </head>
  252.         <body>
  253.  
  254.                 <!--
  255.                         Phr0z3n.Dev's Child Enrollment Registration System
  256.                   -->
  257.                 <div id="mainDiv">
  258.                         <div id="menuDiv">
  259.                                 <div><a href="">Monday</a></div>
  260.                                 <div><a href="">Tuesday</a></div>
  261.                                 <div><a href="">Wednesday</a></div>
  262.                                 <div><a href="">Thursday</a></div>
  263.                                 <div><a href="">Friday</a></div>
  264.                                 <hr />
  265.                                 <div><a href="">Admin</a></div>
  266.                                 <div><a href="">Log Out</a></div>
  267.                         </div>
  268.  
  269.                         <div id="contentDiv">
  270.                                 <h1>Site Content</h1>
  271.  
  272.                                 <p>
  273.                                 Site content goes here.
  274.                                 </p>
  275.                         </div>
  276.  
  277.                         <div id="siteInfoDiv">
  278.                                 <div id="siteInfoHeaderDiv">
  279.                                         Site Info
  280.                                 </div>
  281.                                 <div id="siteInfoBodyDiv">
  282.                                         Site info goes here
  283.                                 </div>
  284.                         </div>
  285.  
  286.                         <div id="footerDiv">
  287.                                 <div id="supportDiv"><a href="">Support</a></div>
  288.                                 <div id="contactsDiv"><a href="">Contacts</a></div>
  289.                                 <div id="affiliatesDiv"><a href="">Affiliates</a></div>
  290.                         </div>
  291.                 </div>
  292.  
  293.         </body>
  294. </html>
RAW Paste Data
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top