CSS3 Tabs Menu

Create index.html

<!DOCTYPE HTML>
<head>
<meta charset=utf-8 />
<title>CSS3 Tabs</title>
<link rel="stylesheet" href="style.css" media="screen" />

</head>

<div id="c1">
   <a href="#c1" title="HTML5">HTML5</a> 
   <div class="tab-content"> 
            <h3>HTML5</h3>
            <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>
            </div>
 </div>
    
 <div id="c2">
   <a href="#c2" title="CSS3">CSS3</a>
   <div class="tab-content">
            <h3>Cascading Style Sheets</h3>
            <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
            </div>
 </div>

<div id="c3">
   <a href="#c3" title="JAVASCRIPT">JAVASCRIPT</a> 
   <div class="tab-content">
            <h3>JavaScript</h3>
            <p>JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications. With the rise of the single-page web app and JavaScript-heavy sites, it is increasingly being used as a compile target for source-to-source compilers from both dynamic languages and static languages. In particular, Emscripten and highly optimised JIT compilers, in tandem with asm.js that is friendly to AOT compilers like OdinMonkey, have enabled C and C++ programs to be compiled into JavaScript and execute at near-native speeds, making JavaScript be considered the "assembly language of the web", according to its creator and others.</p>
            </div>
 </div>

<div id="c4">
   <a href="#c4" title="JQUERY">JQUERY</a> 
   <div class="tab-content"> 
            <h3>JQuery</h3>
            <p>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.jQuery is the most popular JavaScript library in use today.jQuery is free, open-source software licensed under the MIT License.jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.</p>
            </div>
 </div>

</div>

</body>
</html>

Create style.css

body {
 font-size:13px;
 font-family:Arial, Helvetica, sans-serif;
 color:#E7E7E7;
 background:#999999;
}

p, .tab-content li, h1, h2, h3{ 
    margin-bottom: 10px;
}

a{
 text-decoration:none; 
 color:#EFD24A;
}

a:hover{
 color:#AF9B41;
}

.tab-container h3{ 
 font-size:147%;
 color:#baff9f;
}
/* `Containers */

#container{ 
 margin:0 auto; 
 width:480px; 
 margin-top:4%;
}

.tab-container {
  background:#333;
    border-bottom-left-radius: 13px;
    border-top-left-radius: 12px;
    border-top-right-radius: 51px;
    box-shadow: 2px 3px 2px #333;
    padding: 7px;
    position: relative;
    z-index: 0;
}

/* `Common Styles*/

/* Tabs */

.tab-container > div { 
 display: inline; 
}

.tab-container > div > a {  
 position: relative !important; 
 text-decoration: none; 
 color: #D7D7D7; 
 display: inline-block;
 padding: 4px 14px; 
 font-size:15px;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 margin:2px;
 background: #4C4648;
 padding: 4px 14px;
 
    
 
}

.tab-container > div:not(:target) > a {
}

.tab-container > div:target > a { 
    background: none repeat scroll 0 0 #948a81;
    text-shadow: 0 1px 0 #4C4648;
}

.tab-container > div > div { 
 background: #333; 
 z-index: -2;
 top: 50px;
 padding: 20px;
 min-height:281px; 
 border-bottom-left-radius: 10px;
    border-bottom-right-radius: 62px;
} 
.tab-container > div:not(:target) > div { 
 position: absolute;
}

.tab-container > div:target > div { 
 position: absolute; 
 z-index: 3 !important; 
}

div.tab-content{ 
 padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
 
.tab-content img{ 
 margin:0 auto; 
 display:block; 
 padding-bottom: 20px;
    padding-top: 10px;
}

CSS and CSS3 TutorialS

Search This Blog

CSS3 Tabs Menu

Create index.html

Create style.css

Comments

Post a Comment