LISTING PROGRAM
Cara penggunaan java script, berikut ini adalah script htmlnya.
Navbar.html
<head>
<title>Praktikum
2</title>
<link
rel="stylesheet" href="style.css">
<link
rel="stylesheet" type="text/css" media="all"
href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script
src="script.js"></script>
</head>
<body>
<div class="content">
<h1><b>Mutia Sulisetyani</b></h1>
</div>
<div class="container">
<header>
<div
class="top-menu">
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">About</a></li>
<li><a
href="">Contact</a></li>
<li><a
href="">Help</a></li>
<li><a
href="">Development</a></li>
<li><a
href="#" id="searchtoggl"><i class="fa fa-search
fa-lg"></i></a></li>
<div id="searchbar" class="clearfix">
<form
id="searchform" method="get"
action="searchpage.php">
<button
type="submit" id="searchsubmit" class="fa fa-search
fa-2x"></button>
<input
type="search" name="s" id="s"
placeholder="Keywords..." autocomplete="off">
</form>
</div>
</ul>
</div>
</header>
<section
class="gambar">
<br>
</section>
</div>
</body>
Untuk membuar form search tersembuyi yaitu
menggunakan javascript seperti berikut.
Script.js
$(function(){
var
$searchlink = $('#searchtoggl i');
var
$searchbar = $('#searchbar');
$('.top-menu ul li a').mouseover(function(e){
e.preventDefault();
if($(this).attr('id') == 'searchtoggl') {
if(!$searchbar.is(":visible")) {
// if invisible we switch the icon to appear collapsable
$searchlink.removeClass('fa-search').addClass('fa-search-minus');
}
else {
// if visible we switch the icon to appear as a toggle
$searchlink.removeClass('fa-search-minus').addClass('fa-search');
}
$searchbar.slideToggle(300,
function(){
// callback after search bar animation
});
}
});
$('#searchform').submit(function(e){
e.preventDefault(); // stop form submission
});
});
Reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin:
0;
padding: 0;
border:
0;
font-size: 100%;
font:
inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color:
#414141;
padding-bottom: 55px;
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before,
q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse;
border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
font-size: 3.0em;
line-height: 1.55em;
margin-bottom: 10px;
color:
#666;
}
p {
font-size: 1.4em;
line-height: 1.35em;
color:
#414141;
margin-bottom: 15px;
}
a {
color:
#3f7fa3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Untuk mempercantik tampilan web maka diperlukan
css, berikut ini adalah tampilan cssnya.
Style.css
@import url('reset.css');
/* Start Code */
body{
background:
#242424;
}
.container{
background:
#fff;
max-width:
960px;
padding:
20px;
margin:
20px auto;
}
header{
padding:
20px 30px;
overflow:
hidden;
border-bottom:
1px solid #ddd;
}
.logo{
float:
left;
width:
100px;
}
.top-menu{
float:
left;
margin-top:
-10px;
}
.top-menu
ul{
list-style-type:
none;
}
.top-menu
ul li{
display:
inline-block;
}
.top-menu
ul li a{
display:
block;
padding:
10px;
font-size:
20px;
color:
#002633;
}
.top-menu
ul li a:hover{
color:
gray;
}
#searchbar
{
display:none;
float:right;
width:35%;
height:30px;
margin-top:
5px;
margin-left:
25px;
padding-left:30px;
padding-right:10px;
z-index:9999;
background:#f4f4f4;
}
#s
{
display:block;
width:85%;
border:0;
outline:none;
height:30px;
line-height:30px;
font-size:2em;
font-weight:100;
color:#676767;
padding:0;
background:
#f4f4f4;
}
#searchsubmit
{
display:block;
float:right;
margin-top:6px;
background:none;
color:#717171;
border:0;
outline:none;
cursor:pointer;
}
.content h1{
font-size:
40px;
margin-top:
10px;
color:
white;
}
.gambar{
display:block;
width:100%;
height:100%;
background:url(header.jpg) no-repeat;
background-size:100%;
margin-bottom:-25%;
}
.content{
text-align:
center;
padding:
0 30px;
}
.nav {
margin:
30px;
background: #666;
height:
60px;
display: inline-block;
}
Tidak ada komentar:
Posting Komentar