SONITAJ
چهارشنبه 21 فروردین 1392, 12:30 عصر
سلام
من يك منو كشويي با css ساخته ام كه كدش را در زير ميزارم .من ميخواهم اين منو توي تمام صفحات وبم نمايش داده بشه وزير منوها را كوچكتر ويك فونت زيبا تر براش انتخاب كنم از آنجايي كه به css تسلط كافي ندارم وتازه كار هستم نميدونم چه طوري بايد اين كار را انجام بدهم وممكنه لطفا هركسي بلده كمكم كنه وبه من راهنمايي بده.
درضمت اينوهم بگم كه قالب وبم را با wrapper نوشتم.
<?php
ob_start();
require_once 'config.php';
?>
<!doctype html>
<html dir="rtl">
<meta charset="utf-8"/>
<title><?php echo TITR;?></title>
<link type="text/css"/>
<style>
body{
margin:0;
}
#wrapper{
height:auto;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 30%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 30%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 30%);
}
#nav ul li:hover a {
color: #fff;
}
#nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#footer_container{
background:#fff;
width:100%;
bottom:0;
background-position:bottom;
position:absolute;
z-index:1;
}
#footer {
width:100%;
text-align:center;
bottom:0;
background-position:bottom;
position:absolute;
z-index:2;
}
.textt{
position:absolute;
text-align:center;
direction:rtl;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#fff;
z-index:3;
text-decoration:none;
text-shadow:3px 4px 5px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
.textt:hover{
color:#C33;
text-shadow:1px 2px 3px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
</style>
</head>
<body >
<!----begin wrapper---->
<div id="wrapper">
<!----begin mainheader---->
<div id="main_header">
<div id="logo">
<a href="#">
<img src="keyvan logo.png" style="height:110px;width:100%"/>
</a>
</div>
</div>
<!---- begin navigation---->
<div id="nav" align="center">
<ul>
<li><a href="support.php"><b>پشتیبانی</b> </a></li>
<li><a href="#"><b>واحد فروش</b></a>
<ul>
<li><a href="form.php"><b>فرم سفارش</b></a></li>
<li><a href="follow.php"><b>پیگیری سفارش</b></a></li>
</ul>
</li>
<li><a href="#"><b>راهنما</b></a>
<ul>
<li><a href="buy.php"><b>راهنمای خرید</b></a></li>
<li><a href="payment.php"><b>راهنمای پرداخت</b></a></li>
</ul>
</li>
<li><a href="contact.php"><b>ارتباط باما</b></a></li>
<li><a href="#"></b>درباره ما</b></a>
<ul>
<li><a href="factory.php"></b>درباره کارخانه</b></a></li>
<li><a href="manager.php"><b>مسئولان</b></a></li>
</ul>
</li>
<li><a href="#"><b>نمونه کارها</b></a>
<ul>
<li><a href="facade.php"><b>نمای خارجی</b></a></li>
<li><a href="inside.php"><b>نمای داخلی</b></a></li>
<li><a href="floor.php"><b>نمای کف</b></a></li>
</ul>
</li>
<li><a href="#"><b>محصولات</b></a>
<ul>
<li><a href="ajor.php"><b>طرح آجری</b></a>
<li><a href="pazel.php"><b>طرح پازل</b></a>
<li><a href="hasir.php"><b>طرح حصیری</b></a>
<li><a href="ghaychi.php"><b>طرح قیچی</b></a>
<li><a href="Namonazam.php"><b>طرح نامنظم</b></a>
<li><a href="antik.php"><b>طرح آنتیک</b></a>
</ul>
</li>
<li><a href="main.php"><b>صفحه اصلی</b></a></li>
</ul>
</div>
<!---- end navigation ---->
<!---- begin container---->
<div id="container">
<div class="content" align="center" dir="rtl">
</div>
</div>
<!---- end container---->
<!----begin footer---->
<div id="footer_container">
<div id="footer">
<a href="index.php"><img src="copyright.png" style="height:60px; width:100%"/></a>
</div>
</div>
<!----end footer---->
</div>
<!----end wrapper----->
</body>
</html>
<?php
ob_end_flush();
?>
در واقع ميخواهم اين منو را به صورت ظريف تر وشيك تر در بيارم ولي نميدونم چه جوري؟
يا اگر كسي منويي شبيه اين داره وميتونه كدش را به من بده برام بذاره.
ممنونم.
من يك منو كشويي با css ساخته ام كه كدش را در زير ميزارم .من ميخواهم اين منو توي تمام صفحات وبم نمايش داده بشه وزير منوها را كوچكتر ويك فونت زيبا تر براش انتخاب كنم از آنجايي كه به css تسلط كافي ندارم وتازه كار هستم نميدونم چه طوري بايد اين كار را انجام بدهم وممكنه لطفا هركسي بلده كمكم كنه وبه من راهنمايي بده.
درضمت اينوهم بگم كه قالب وبم را با wrapper نوشتم.
<?php
ob_start();
require_once 'config.php';
?>
<!doctype html>
<html dir="rtl">
<meta charset="utf-8"/>
<title><?php echo TITR;?></title>
<link type="text/css"/>
<style>
body{
margin:0;
}
#wrapper{
height:auto;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 30%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 30%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 30%);
}
#nav ul li:hover a {
color: #fff;
}
#nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#footer_container{
background:#fff;
width:100%;
bottom:0;
background-position:bottom;
position:absolute;
z-index:1;
}
#footer {
width:100%;
text-align:center;
bottom:0;
background-position:bottom;
position:absolute;
z-index:2;
}
.textt{
position:absolute;
text-align:center;
direction:rtl;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#fff;
z-index:3;
text-decoration:none;
text-shadow:3px 4px 5px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
.textt:hover{
color:#C33;
text-shadow:1px 2px 3px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
</style>
</head>
<body >
<!----begin wrapper---->
<div id="wrapper">
<!----begin mainheader---->
<div id="main_header">
<div id="logo">
<a href="#">
<img src="keyvan logo.png" style="height:110px;width:100%"/>
</a>
</div>
</div>
<!---- begin navigation---->
<div id="nav" align="center">
<ul>
<li><a href="support.php"><b>پشتیبانی</b> </a></li>
<li><a href="#"><b>واحد فروش</b></a>
<ul>
<li><a href="form.php"><b>فرم سفارش</b></a></li>
<li><a href="follow.php"><b>پیگیری سفارش</b></a></li>
</ul>
</li>
<li><a href="#"><b>راهنما</b></a>
<ul>
<li><a href="buy.php"><b>راهنمای خرید</b></a></li>
<li><a href="payment.php"><b>راهنمای پرداخت</b></a></li>
</ul>
</li>
<li><a href="contact.php"><b>ارتباط باما</b></a></li>
<li><a href="#"></b>درباره ما</b></a>
<ul>
<li><a href="factory.php"></b>درباره کارخانه</b></a></li>
<li><a href="manager.php"><b>مسئولان</b></a></li>
</ul>
</li>
<li><a href="#"><b>نمونه کارها</b></a>
<ul>
<li><a href="facade.php"><b>نمای خارجی</b></a></li>
<li><a href="inside.php"><b>نمای داخلی</b></a></li>
<li><a href="floor.php"><b>نمای کف</b></a></li>
</ul>
</li>
<li><a href="#"><b>محصولات</b></a>
<ul>
<li><a href="ajor.php"><b>طرح آجری</b></a>
<li><a href="pazel.php"><b>طرح پازل</b></a>
<li><a href="hasir.php"><b>طرح حصیری</b></a>
<li><a href="ghaychi.php"><b>طرح قیچی</b></a>
<li><a href="Namonazam.php"><b>طرح نامنظم</b></a>
<li><a href="antik.php"><b>طرح آنتیک</b></a>
</ul>
</li>
<li><a href="main.php"><b>صفحه اصلی</b></a></li>
</ul>
</div>
<!---- end navigation ---->
<!---- begin container---->
<div id="container">
<div class="content" align="center" dir="rtl">
</div>
</div>
<!---- end container---->
<!----begin footer---->
<div id="footer_container">
<div id="footer">
<a href="index.php"><img src="copyright.png" style="height:60px; width:100%"/></a>
</div>
</div>
<!----end footer---->
</div>
<!----end wrapper----->
</body>
</html>
<?php
ob_end_flush();
?>
در واقع ميخواهم اين منو را به صورت ظريف تر وشيك تر در بيارم ولي نميدونم چه جوري؟
يا اگر كسي منويي شبيه اين داره وميتونه كدش را به من بده برام بذاره.
ممنونم.