API tools faq
paste
Advertisement
Phr0zen_Penguin

The Fancy Web Site Menu (Without JavaScript)

Phr0zen_Penguin
Aug 29th, 2014
352
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.86 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!