Ohayo! Movimentando esse blog, hoje venho trazer um segundo tutorial! Venho trazer um modelo de Abas, com sub menus. É ótimo para blog de resenha ou funções similares, ele é muito fácil de editar e dar seu estilo. Eu o disponibilizo em uma forma mais simples e outra com CSS para facilitar vocês, esta meio feiinho de fato, mas com uma escolha de cores e efeitos ficara muito lindo!
Esse modelo é simples e sem estilo CSS, vamos dizer que é uma base.
Códigos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
<li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
<li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
</html>
Nesse modelo já tem CSS aplicado, qual você pode melhorar. Seu corpo é muito simples para edições, até mesmo quem não entende muito de HTML com um pouquinho de calma e paciência consegue fazer ele ficar lindo.
Códigos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.nav-tabs
{
border-color:#004A00;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #004A00;
background-color:#004A00;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D5FFD5;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D5FFD5 !important;
border-radius: 5px;
color:#000;
}
.tab-pane {
border:solid 1px #004A00;
border-top: 0;
width:60%;
background-color:#D5FFD5;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
<li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://sites.google.com/site/webunnycrazy/c/Aba%20Bootstrap.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.nav-tabs
{
border-color:#004A00;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #004A00;
background-color:#004A00;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D5FFD5;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D5FFD5 !important;
border-radius: 5px;
color:#000;
}
.tab-pane {
border:solid 1px #004A00;
border-top: 0;
width:60%;
background-color:#D5FFD5;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li>
<li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li>
<li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
<li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
</ul>
</li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="javatab">The Java is an object-oriented programming language that was developed by James Gosling from the Sun Microsystems in 1995.
</div>
<div class="tab-pane" id="csharptab">C# is also a programming language</div>
<div class="tab-pane" id="mysqltab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</body>
</html>
Créditos: jQuery A-Z
Olá, Wendy!
ResponderExcluirAdorei seu blog, os tutoriais, postagens...
Ajudou com certeza muita gente.
Beijoss!! ♥
Sweeter Than Sweet / Dá uma passadinha?
Yo!! Obrigada por ter gostado e pela visita. Sem duvida irei fazer uma visita. =3
Excluir