gol
gol

hardy

گر می نخوری طعنه مزن مستان را

بنیاد مکن تو حیله و دستان را

تو غره بدان مشو که می می نخوری

صد لقمه خوری که می غلامست آنرا
«خیام»

×

توجه : دو ارسال نخستِ کاربرانِ جدید در تالار میدوری , پیش از نمایش , نیاز به تایید مدیریت دارند.

Latest Threads  آخرین ارسال ها :
نمایش آخرین ارسال این موضوع
 
امتیاز موضوع:
  • 5 رأی - میانگین امیتازات : 3
  • 1
  • 2
  • 3
  • 4
  • 5
 
  
1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان
نویسنده:میدوری
آخرین ارسال:میدوری
پاسخ: 1
بازدید: 729
subscription
quickreply advancequickreply report



( ابزار سایت ) منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل بیستم)
  نویسنده پیام  | تغییر اندازه ی متن:  zoomin zoomout default
admin میدوری profile  
آفلاین
مدیر کل تالار
مدالهای میدوری1000500
1001011720
168241051
دسترسی به میدوری
ارسال یک ایمیل به این کاربر ارسال یک پیام خصوصی به این کاربر مشاهده وب سایت کاربر یافتن تمامی ارسال های این کاربر اعتبار:
اطلاعات میدوری


تاریخ عضویت: 05 November 2011

ارسال ها: 1,740
شماره کاربری: 1
میزان اعتبار:

محل سکونت: تهران
ماه تولد:
جنسيت:
آخرین دیدار:
تماس با میدوری
حالت میدوری
صفحه های میدوری
گوگل پلاس فیس بوک توییتر یوتیوب کلوب
اینستاگرام تلگرام
ارسال: #1
Fish منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل بیستم)

rightarrow
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل بیستم)
منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست . Cool


کد PHP:
<style>
.slideOuter {width:747px; overflow:hidden; margin:0 auto; position:relative; z-index:500;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:1200px; overflow:hidden;}
.slideOuter .slide li {float:left; position:relative;}
.slideOuter .slide li {display:block; float:left; width:148px; border-right:1px solid #fff; background:#ddd; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide #p5 {width:360px;}
.slideOuter .slide li img {border:0; width:360px; height:125px; display:block; position: absolute; top:0; left:-106px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide:hover #p1,
.slideOuter .slide:hover #p2,
.slideOuter .slide:hover #p3,
.slideOuter .slide:hover #p4 {width:96px;}
.slideOuter .slide li:hover img {left:0;}
.slideOuter .slide #p1:hover,
.slideOuter .slide #p2:hover,
.slideOuter .slide #p3:hover,
.slideOuter .slide #p4:hover {width:360px;}
ul.slide dl {padding:0; margin:125px 0 0 0;}
ul.slide dt {padding:0 5px; margin:0; font:normal 13px/25px arial,sans-serif; color:#eee; background:#008; border-top:1px solid #fff;}
ul.slide dd {padding:0 5px; margin:0; font:normal 12px/18px arial,sans-serif; color:#eee; height:0; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.slide dd a { color:#fff; text-decoration:underline;}
ul.slide dd a:hover { color:#fff; text-decoration:none;}
ul.slide dt:hover + dd {height:104px;}
ul.slide dd:hover {height:104px;}
ul.slide .m1 {background:#562;}
ul.slide .m2 {background:#366;}
ul.slide .m3 {background:#246;}
ul.slide .m4 {background:#741;}
ul.slide .m5 {background:#623;}
ul.slide li:hover dt {font-weight:bold; color:#fff;}
</style>
<br>
<div class ="slideOuter">
    <ul class ="slide">
	   <li id="p1">
		  <img src="pic2.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel 
<a href="#url">libero ac elit cursus</a> rutrum eu ac urna. Phasellus ipsum orci, rutrum eu pulvinar non, posuere nec augue.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Duis velit leo, rutrum non bibendum non, feugiat et
ipsum. In hac habitasse platea dictumst. In risus libero, aliquam non
malesuada quis, varius id libero. Nunc sed metus ac quam laoreet
ultricies a sed urna. Mauris aliquet dapibus pharetra.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Aliquam quis magna sit amet nisi blandit vestibulum. Sed et orci 
sed neque interdum elementum quis non tellus.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Curabitur tempus velit turpis, sit amet pulvinar
justo. Proin eu dolor neque. Pellentesque facilisis erat sit amet lorem
blandit egestas.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Quisque eget dolor tellus. Praesent ullamcorper tristique mi eget volutpat. 
Nullam bibendum dolor id arcu condimentum vehicula.</dd>
		  </dl>
	   </li>
	   <li id="p2">
		  <img src="pic3.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Phasellus tempor posuere rhoncus. Etiam eleifend nisi
 a nibh imperdiet lobortis venenatis lacus facilisis. Fusce venenatis 
diam sit amet elit viverra porta. Vivamus vitae tempus risus.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Nunc dui eros, sodales quis mollis a, sollicitudin eget quam. 
<a href="#url">Proin et lorem eu magna</a> elementum pulvinar quis a quam. Suspendisse a erat eu velit feugiat adipiscing.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Vivamus urna enim, luctus et fringilla vel, aliquet 
ut ligula. Pellentesque tincidunt posuere lobortis. Integer sodales 
sollicitudin sem ac molestie. Sed pharetra, odio ut venenatis aliquam, 
orci mi dapibus mi, in tristique urna augue id nisi.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Proin lacus lectus, fermentum vel dictum ac, iaculis 
sit amet metus. Morbi augue turpis, malesuada quis fringilla ornare, 
rutrum et nisl. Praesent ultricies, leo ac interdum rhoncus, sem est 
auctor eros, in lobortis diam dui non augue.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Pellentesque malesuada, justo ut auctor lobortis, 
urna dolor dignissim odio, malesuada blandit lorem mi id nunc. Donec 
tristique auctor sollicitudin.</dd>
		  </dl>
	   </li>
	   <li id="p3">
		  <img src="pic4.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">In et arcu eget risus sagittis tincidunt. Quisque 
nibh odio, lobortis at varius viverra, aliquam sed metus. Phasellus 
sagittis, dui sit amet pharetra iaculis, quam nulla sollicitudin sem, 
vel mattis turpis leo et metus.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Curabitur varius mauris vel dolor aliquet accumsan. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
diam lectus, luctus at vehicula sed, ultricies in orci.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos himenaeos. <a href="#url">Pellentesque bibendum</a>, lacus blandit mattis dignissim, justo diam lobortis felis, 
at convallis turpis velit vitae libero.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Nunc velit arcu, laoreet sed tristique quis, 
malesuada ut erat. Pellentesque suscipit diam ut tortor faucibus id 
tincidunt felis gravida. Nulla porta lacinia pellentesque.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Aliquam aliquet blandit justo sed gravida. Curabitur 
tristique sollicitudin justo, nec vehicula dui porta nec. Sed eleifend 
lacinia mollis. Nunc purus ante, lacinia sed faucibus id, pellentesque 
eget lectus.</dd>
		  </dl>
	   </li>
	   <li id="p4">

		  <img src="pic5.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">In ac tellus ac sapien ultricies hendrerit. 
Suspendisse potenti. Praesent blandit, nisi nec aliquam sodales, erat 
diam tincidunt dui, eu euismod lectus sapien sit amet nisi. Quisque in 
tellus dolor.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Aenean sodales dui a sem egestas ornare. Cras sem 
dui, gravida sit amet ullamcorper non, placerat et sem. Pellentesque ac 
diam lacinia lacus commodo fermentum.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Nullam a odio at nisi consequat posuere quis non 
eros. In rutrum viverra augue, ac facilisis libero ultricies nec. 
Aliquam cursus turpis nec lorem gravida in dignissim augue facilisis. 
Maecenas condimentum nisi sed metus luctus mattis.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Mauris sagittis luctus nisi eget ultrices. Integer egestas tristique dapibus. 
Sed sodales bibendum molestie. <a href="#url">Mauris diam arcu</a>, vehicula et tempor in, consectetur nec dui. 
Nunc eu enim sed ligula aliquam gravida ac ac ipsum.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Praesent dictum tincidunt ipsum, id pellentesque mi 
semper et. Fusce mollis quam nec leo pharetra hendrerit. Nunc viverra, 
nisl ac dictum dictum, nibh libero fermentum metus, et ornare odio lacus
 id metus.</dd>
		  </dl>
	   </li>
	   <li id="p5">
		  <img src="pic1.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Donec odio tortor, fermentum nec placerat eget, 
pretium accumsan purus. Nam sit amet dui vitae lectus malesuada 
porttitor sed et felis. Sed nec facilisis leo. Sed ac nibh sed turpis 
pretium vestibulum quis nec massa.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Duis adipiscing, lectus bibendum fermentum tempor, 
risus lectus ultricies leo, ut porta nisl velit in libero. Fusce luctus 
ultrices ligula ac tempus. Mauris urna nunc, sollicitudin in facilisis 
et, auctor sit amet nibh.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Donec tristique posuere sapien nec sagittis. Proin 
vestibulum, purus quis pulvinar viverra, magna mi blandit arcu, at 
volutpat sapien tortor ut justo. Nulla sed mauris ac augue pharetra 
eleifend quis a est. Integer accumsan mauris sit amet turpis sodales 
tempus.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Curabitur varius mauris vel dolor aliquet accumsan. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
diam lectus, luctus at vehicula sed, ultricies in orci. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Pellentesque bibendum, <a href="#url">lacus blandit mattis dignissim</a>,
 justo diam lobortis felis, at convallis turpis velit vitae libero. Nunc
 velit arcu, laoreet sed tristique quis, malesuada ut erat.</dd>
		  </dl>
	   </li>
    </ul>
</div>
<br>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187





امضای میدوری :
[تصویر: mvd09b5.gif]
[تصویر: midori-sign-400.png]
محل حضور کاربر در تالار :  admin میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : help (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)

برچسب ها :

24 - April - 2014 12 : 11 AM
اعتبار: اهدای موجودی بــانــکــ نقل قول این ارسال در یک پاسخ


subscription
quickreply advancequickreply report

موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
minioni abzar نوشته های نئونی با CSS3 میدوری 0 663 25 - June - 2016 11 : 07 PM
آخرین ارسال: میدوری
minioni abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح چهلم) میدوری 0 828 12 - June - 2016 05 : 05 PM
آخرین ارسال: میدوری
HumanFemale abzar اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح سی و نهم) میدوری 0 821 17 - May - 2016 24 : 05 PM
آخرین ارسال: میدوری
minioni abzar چینش تصاویر در سایت بصورت ریسپانسیو با CSS میدوری 0 570 20 - January - 2016 31 : 12 PM
آخرین ارسال: میدوری
Flower abzar چک باکس های زیبا با CSS میدوری 0 1,046 01 - December - 2015 50 : 12 PM
آخرین ارسال: میدوری

بازديدکنندگان از موضوع
کاربرانی که از موضوع بازدید کرده اند ( 3 ) کاربر

ابزار موضوع



1 کاربر حاضر در تاپیک: (0 عضو, و 1 مهمان). 1 مهمان