رحمت حاجی سعدین

سایت شخصی رحمت حاجی سعدین


دسته بندی آبشاری!

سلام دوستان ! راستش اینقد بیکارم :) دارم الکی پست می زارم . در این پست با استفاده از css دسته بندی ابشاری ساختم شما نیز می تونید از این طرح الهام بگیرید و منو و دسته بندی ابشاری ایجاد کنید . یا حق

<!DOCTYPE html><html lang="fa"><head>

<style>

@font-face {
    font-family: 'yekan';
    src: url('http://bayanbox.ir/download/3497736158090040165/iranyekanweblight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #a9afb5;
    font-family: 'yekan';
    font-size: 10px;
    line-height: 10px;
}



nav {
    margin: 45px auto;
    text-align: center;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #f1f4f7;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    list-style: none;
    position: right;
    display: inline-table;
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
}

nav ul li {
    float: right;
    position: left;
}

nav ul li:hover {
    background: #a70101;
}

nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block;
    padding: 10px 15px;
    color: #4e4e4e;
    text-decoration: none;
}

nav ul ul {
    background: #9c0000;
    padding: 0;
    position: absolute;
    left: auto;
    width: auto;
}
nav ul ul li {
    float: none;
    border-top: 1px solid #940000;
    border-bottom: 1px solid #940000;
    position: left;
}
nav ul ul li a {
    padding: 10px 35px;
    color: #fff;
}   
nav ul ul li a:hover {
    background: #112f44;
}
        
nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}
        

		
</style>
</head><body>
			<box:categories>	
<nav>
	<ul>
<view:categories>
								<li>
									<check:if category_selected>
										
											<a><h3>(*category_name*) </h3></a>
										
									</check:if>
									<check:if not category_selected>
										<a href="(*category_link*)"><h3>(*category_name*) </h3></a>
									</check:if>
									<check:if category_children>
										<ul>
											<view:category_children></view:category_children>
										</ul>
									</check:if>
								</li>
							</view:categories>
	</ul>
</nav>
</box:categories>	
</body></html>

دمو : http://rahmathaji.blog.ir/

تو مال من میره زیر پست :( باید پوزیشنشو پی بیزارم؟

با استفاده از انسپکتور گوگل کروم پوزیشن دلخواهتون رو پیاده سازی کنید
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
سایت شخصی رحمت حاجی سعدین
دانلود قالب بلاگ
آموزش بلاگ نویسی
دست نوشته ها و ...
پیوندها
Designed By Erfan Powered by Bayan