داروپ

آپتودیت دارو

داروپ

آپتودیت دارو

آخرین مطالب
  • ۹۹/۰۸/۰۸
    :(
آخرین نظرات

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

پنجشنبه, ۲۸ فروردين ۱۳۹۹، ۰۳:۴۶ ق.ظ

سلام دوستان ! راستش اینقد بیکارم :) دارم الکی پست می زارم . در این پست با استفاده از 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="">
تجدید کد امنیتی