-
bombom-pvpserverler
Acemi Üye
|
19.09.2012, 16:55 (UTC) Mesaj konusu: Yogun İstek Uzerine Accordion Css Tasarim |
|
|
Kod: <head>
<script type="text/javascript" src="http://dl.dropbox.com/u/82955745/Accordion/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/82955745/Accordion/ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "templatemo_menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/82955745/Accordion/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/82955745/Accordion/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('.slider').kwicks({
max : 740,
spacing : 1
});
});
</script>
</head>
<body>
<div id="templatemo_top_wrapper">
<div id="templatemo_top">
<div id="site_title"><h1><a href="http://www.templatemo.com">Free CSS Templates</a></h1></div>
<div id="templatemo_menu" class="ddsmoothmenu">
<ul>
<li><a href="blog.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="http://www.templatemo.com/page/1">Sub menu 1</a></li>
<li><a href="http://www.templatemo.com/page/2">Sub menu 2</a></li>
<li><a href="http://www.templatemo.com/page/3">Sub menu 3</a></li>
<li><span class="bottom"></span></li>
</ul>
</li>
<li><a href="portfolio.html"><span></span>Portfolio</a>
<ul>
<li><a href="http://www.templatemo.com/page/1">Sub menu 1</a></li>
<li><a href="http://www.templatemo.com/page/2">Sub menu 2</a></li>
<li><a href="http://www.templatemo.com/page/3">Sub menu 3</a></li>
<li><a href="http://www.templatemo.com/page/4">Sub menu 4</a></li>
<li><a href="http://www.templatemo.com/page/5">Sub menu 5</a></li>
<li><span class="bottom"></span></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<br style="clear: left" />
</div> <!-- end of menu -->
</div> <!-- end of top -->
</div> <!-- end of top wrapper -->
<div id="templatemo_main_top"></div>
<div id="templatemo_main_wrapper">
<div id="templatemo_slider_wrapper">
<ul class="slider horizontal" >
<li id="slide_1"><img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion1.jpg" alt="Slider 01" /></li>
<li id="slide_2"><img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion2.jpg" alt="Slider 02" /></li>
<li id="slide_3"><img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion3.jpg" alt="Slider 03" /></li>
<li id="slide_4"><img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion4.jpg" alt="Slider 04" /></li>
<li id="slide_5"><img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion5.jpg" alt="Slider 05" /></li>
</ul>
</div>
<div id="templatemo_main">
<div class="col col_3 hp_post">
<h4>Web Design</h4>
<p>Vivamus dapibus quam nec ipsum suscipit pulvinar.</p>
<a href="#">Mehr</a>
</div>
<div class="col col_3 hp_post">
<h4>Web Hosting</h4>
<p>Mauris condimentum lacinia tellus, ac vestibulum at.</p>
<a href="#">Mehr</a>
</div>
<div class="col col_3 hp_post no_margin_righ">
<h4>Web Programming</h4>
<p>Sed a turpis sed quam elementum quis mauris.</p>
<a href="#">Mehr</a>
</div>
<div class="col col_32">
Tasarim Altindakı Yazi
Kod: </div>
<div class="col col_3 no_margin_righ"><br /><br />
<h3>Deine Sidebar</h3>
<div class="rp_pp">
<img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion_image_01.jpg" alt="" />
<a href="#">Praesent interdum, nulla sed posuere rhoncus.</a>
<p>Feb 23, 2048 - 150 comments</p>
<div class="cleaner"></div>
</div>
<div class="rp_pp">
<img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion_image_02.jpg" alt="Image 02" />
<a href="#">Curabitur elit dolor, tristique non suscipit id et.</a>
<p>Feb 20, 2048 - 164 comments</p>
<div class="cleaner"></div>
</div>
<div class="rp_pp">
<img src="http://img.webme.com/pic/h/hpbktemplateworld/accordion_image_03.jpg" alt="Image 03" />
<a href="#">Fusce dolor neque, placerat ac venenatis, venenatis ac leo.</a>
<p>Feb 14, 2048 - 172 comments</p>
<div class="cleaner"></div>
</div>
</div>
<div class="cleaner"></div>
</div> <!-- end of main -->
</div> <!-- end of main wrapper -->
<div id="templatemo_footer">
<div class="col col_3">
</div>
<div class="col_33">
Copyright © 2048 <a href="#">Your Company Name</a> | Design <a href="http://www.templatemo.com" target="_parent">Free Templates</a>
| Coding: <a href="http://hpbk-templateworld.de.tl/">HpBk-TemplateWorld</a>
</div>
<div class="cleaner"></div>
</div> <!-- end of footer -->
</body>
</html>
Css Bölümü
Kod: /* ---Dieses Design und noch viele weitere kostenlose Designs findest du auf HpBk-TemplateWorld.de.tl - der Community für Designs und Tutorials im HpBk.--- */
#extraDiv1 {
display:none;
}
#extraDiv2 {
display:none;
}
#extraDiv3 {
display:none;
}
#extraDiv4 {
display:none;
}
#extraDiv5 {
display:none;
}
#extraDiv6 {
display:none;
}
#pre_header {
display:none;
}
#post_header {
display:none;
}
#pre_content {
display:none;
}
#nav_heading {
display:none;
}
#nav {
display:none;
}
div.header {
display:none;
}
h1#title {
display:none;
}
h2#title span {
display:none;
}
td[height="102"] {
position:absolute;
left:50%;
margin-left:-384px;
}
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
color: #7c7970;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 1.4em;
background-color: #c9bda7;
background-image: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_body.jpg);
background-repeat: repeat;
}
a, a:link, a:visited {
color: #29b2c2;
font-weight: normal;
text-decoration: none;
font-style: italic;
}
a:hover {
text-decoration: underline;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
blockquote { font-style: italic; margin: 0 0 0 10px;}
cite { font-weight: bold; color:#7c7970; }
cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #29b2c2; }
h1, h2, h3, h4, h5, h6 { color: #29b2c2; font-weight: normal; }
h1 { font-size: 48px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 24px; margin: 0 0 25px; padding: 3px 0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.hr { background:url() bottom center no-repeat; margin-bottom: 40px }
.float_l { float: left }
.float_r { float: right }
.image_frame {
display: inline-block;
position: relative;
margin: 3px 0 10px 0;
background: #f7f5ee;
padding: 6px;
border: 1px solid #e2ded1;
}
.image_fl {
float: left;
margin: 3px 20px 12px 0;
}
.image_fr {
float: right;
margin: 3px 0 12px 20px;
}
.templatemo_list {
margin: 10px 0 10px 0;
padding: 0;
list-style: none;
}
.templatemo_list li {
color:#7c7970;
margin: 0 0 10px 0;
padding: 0 5px 0 15px;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_list.png) no-repeat scroll 0 5px;
}
.templatemo_list li.flow {
display: block;
float: left;
width: 220px;
margin-right: 40px;
}
.templatemo_list li.nomr {
margin-right: 0;
}
.templatemo_list li a {
color: #7c7970;
font-weight: normal;
}
.templatemo_list li a:hover {
color: #7c7970;
}
#templatemo_top_wrapper {
width: 100%;
height: 75px;
margin-bottom: 20px;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_top.png) repeat-x
}
#templatemo_top {
width: 880px;
padding: 10px 48px;
margin: 0 auto;
}
#templatemo_main_top {
width: 976px;
height: 78px;
margin: 0 auto;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_main_top.png) no-repeat
}
#templatemo_main_wrapper {
width: 880px;
padding: 0 48px;
margin: 0 auto;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_main_middle.png) repeat-y
}
#templatemo_main { padding: 20px 40px 20px }
#templatemo_footer {
width: 900px;
padding: 60px 88px 10px;
margin: 0 auto;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_main_bottom.png) no-repeat top center
}
#site_title {
float: left;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
display: block;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
width: 229px;
height: 54px;
color: #acacac;
text-indent: -10000px;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_logo.png) no-repeat center left;
}
#templatemo_menu { float: right }
#templatemo_slider_wrapper {
width: 878px;
padding: 1px 1px 26px;
margin: 0 auto;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_slider.png) no-repeat bottom
}
.col { float: left; margin-right: 40px }
.col_2 { width: 380px; }
.col_3 { width: 240px; }
.col_32 { width: 520px }
.col_33 { width: 620px }
.no_margin_righ { margin-right: 0 }
.rp_pp { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #ced4dc }
.rp_pp img { float: left; margin-right: 15px; border: 3px solid #fff }
.rp_pp p { font-size: 10px }
.hp_post h4 { margin-bottom: 5px }
.hp_post img { float: left; margin: 3px 10px 30px 0 }
.testimonial {
padding: 0 0 0 70px;
display: block;
background: url() left top no-repeat;
}
.gallery_box {
padding-bottom: 40px;
margin-bottom: 40px;
background: url() bottom no-repeat;
}
.gallery_box img {
background: #f7f5ee;
padding: 6px;
border: 1px solid #e2ded1;
}
.gallery_box h5 {
font-weight: 700;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 5px;
}
.gallery_box a.link {
font-size: 11px;
font-weight: bold;
display: block;
margin-bottom: 15px;
}
.post {
clear: both;
padding-bottom: 40px; margin-bottom: 40px; background: url() bottom no-repeat
}
.no_pmb { margin-bottom: 0; padding-bottom: 0; background: none }
.post img { margin: 3px 40px 0 0 }
.post h2 { margin-bottom: 10px }
.post .meta { font-size: 10px; margin-bottom: 20px }
.post .meta a, .post .meta strong { color: #7b7b7b; font-weight: 700 }
#comment_section {
clear: both;
margin-bottom: 60px;
width: 760px;
}
.first_level {
margin: 0; padding: 0;
}
.comments {
list-style: none;
}
.comments li {
margin-bottom: 10px;
list-style:none;
}
.comments li .commentbox1 {
border-top: 1px solid #fff;
background: #e6e2d5;
}
.comments li .commentbox2 {
border-top: 1px solid #fff;
background: #dcd7ca;
}
.comments li .comment_box {
clear: both;
width:100%;
padding: 15px;
}
.comment_box .gravatar {
float: left;
width: 75px;
margin-right: 30px;
}
.comment_box .gravatar img {
width: 75px;
height: 75px;
}
.comment_box .comment_text { }
.comment_box .comment_text p {
margin: 0;
}
.comment_text .comment_author {
font-size: 14px;
font-weight: bold;
color: #29b2c2;
margin-bottom: 10px;
}
.comment_text .date {
font-size: 12px;
font-weight: normal;
color: #000;
padding-left: 10px;
}
.comment_text .time {
font-size: 12px;
font-weight: normal;
color: #000;
padding-left: 10px;
}
.comment_text .reply a {
display: block;
clear: both;
float: right;
color: #29b2c2;
font-weight: 700;
}
#comment_form {
clear: both;
}
#comment_form h3 {
font-size: 20px;
border-bottom: 1px dotted #666;
margin-bottom: 15px;
padding-bottom: 10px;
}
#comment_form form {
}
#comment_form textarea {
color: #666;
background: #e0dbcd;
border: 1px solid #f7f5e3;
height:150px;
padding:5px;
width: 380px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#comment_form .form_row {
width: 100%;
margin-bottom: 15px;
}
#comment_form form input {
color: #666;
padding: 5px;
width: 250px;
background: #e0dbcd;
border: 1px solid #f7f5e3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#comment_form .submit_btn {
display: block;
width: 70px;
height: 30px;
padding: 5px 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
background-color: #e0dbcd;
border: 1px solid #f7f5e3;
color: #222;
font-size:11px;
cursor: pointer;
}
#contact_form {
padding: 0;
width: 380px;
margin-bottom: 40px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 270px;
padding: 5px;
color: #222;
background: #e0dbcd;
border: 1px solid #f7f5e3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 368px;
height: 200px;
padding: 5px;
color: #222;
background: #e0dbcd;
border: 1px solid #f7f5e3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
#contact_form form .submit_btn {
margin: 10px 0px;
padding: 5px 14px;
font-weight: bold;
background-color: #e0dbcd;
border: 1px solid #f7f5e3;
color: #222;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin-top: 5px;
}
.copyright {
padding: 10px 0;
}
.copyright a {
color: #333;
}
.pagging {
margin: 0 0 20px;
padding: 0;
}
.pagging ul {
margin: 0;
padding: 0;
list-style: none;
}
.pagging ul li {
margin: 0;
padding: 0;
display: inline;
}
.pagging ul li a {
float: left;
display: block;
color: #333;
text-decoration: none;
margin-right: 5px;
padding: 5px 10px;
background-color: #f6f6f6;
border: 1px solid #fff;
}
.pagging ul li a:hover {
background: #5abac4;
border: 1px solid #fff;
color: #fff;
}
.slider {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
width: 878px;
height: 440px;
overflow: hidden;
margin: 0;
padding: 0;
}
.slider li{
/* these are required, but the values are up to you (must be pixel) */
width: 174.8px;
height: 440px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.slider.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 5px; /*Set to same as spacing option. */
float: left;
}
.slider.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
#slide_1 { }
#slide_2 { }
#slide_3 { }
#slide_4 { }
#slide_5 { }
.slider.horizontal #slide_5 {
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.slider.vertical #slide_5 {
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.ddsmoothmenu{
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a {
display: block;
height: 54px;
padding: 0 32px 0 30px;
line-height: 54px;
margin: 0 5px 0 9px;
font-size: 16px;
color: #bcb29c;
text-align: center;
text-decoration: none;
font-weight: 400;
outline: none;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_menu_divider.png) center right no-repeat
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
color: #333;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
width: 215px;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_menu_middle.png) repeat-y
}
.ddsmoothmenu ul li ul span.bottom { position: absolute; width: 215px; height: 16px; bottom: -16px; left: 0; background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_menu_bottom.png) no-repeat; }
.ddsmoothmenu ul li ul span {
width: 215px;
height: 16px;
padding: 0;
margin: -16px 0 0;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_menu_bottom.png) no-repeat
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li {
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font-weight: 500;
width: 180px; /*width of sub menus*/
height: 28px;
line-height: 28px;
padding: 0 15px;
margin: 0 4px 0 1px;
font-size: 12px;
text-align: left;
background: url(http://img.webme.com/pic/h/hpbktemplateworld/accordion_divider.png) no-repeat bottom;
color: #bcb29c;
}
.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover {
color: #333
}
/* Holly Hack for IE */
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.5;
}
/* menu */
|
|