10:48 PM قائمة في الجهات الأربع -عين السمكة- menu fisheye |
فهي مكونة من صور مع روابط تكبر عند مرور مؤشر الفأرة فوقها.
كود
<ul class="menu_r">
- يسرى: كود
<ul class="menu_l">
- عليا: كود
<ul class="menu_s">
- سفلى: كود
<ul class="menu_b">
مع اضافة أكواد التنسيق إما بين كود style أو في كود css للموقع. كود
<style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; } ul, li { margin: 0; padding: 0; list-style: none; } ul { text-align: center; } ul.menu_s li, ul.menu_b li{ display: inline; } ul.menu_l, ul.menu_r, ul.menu_b { position: absolute; } ul.menu_l, ul.menu_r { top: 50%; margin-top: -200px } ul.menu_l, l.menu_b { left: 0; } ul.menu_r { right: 0; } ul.menu_b { bottom: 0; width: 100%; } a:hover, a:focus { /* we use :focus for keyboard navigation */ z-index: 200 /* bring to top when the mouse is over */ } a img { border: none; -webkit-transition: all .2s; /* in Safari, every animatable property triggers an animation in .2s */ } ul.menu_s a img{ -webkit-transform-origin: top; /* in Safari, the origin for transformation */ -moz-transform-origin: top; /* in Firefox, the origin for transformation */ } ul.menu_l a img{ -webkit-transform-origin: left center; -moz-transform-origin: left center; } ul.menu_r a img{ -webkit-transform-origin: right center; -moz-transform-origin: right center; } ul.menu_b a img{ -webkit-transform-origin: bottom; -moz-transform-origin: bottom; } a:hover img, a:focus img { -webkit-transform: scale(2); -moz-transform: scale(2); } p { text-align: center; position: absolute; top: 60%; width: 100%; } </style> <ul class="menu_s"> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/1.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/2.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/3.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/4.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/5.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/6.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/7.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/8.png" alt="bassel" width="50"/></a></li> </ul> <ul class="menu_l"> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/1.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/2.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/3.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/4.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/5.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/6.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/7.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/8.png" alt="bassel" width="50"/></a></li> </ul> <ul class="menu_r"> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/1.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/2.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/3.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/4.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/5.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/6.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/7.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/8.png" alt="bassel" width="50"/></a></li> </ul> <ul class="menu_b"> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/1.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/2.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/3.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/4.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/5.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/6.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/7.png" alt="bassel" width="50"/></a></li> <li><a href="#"><img src="http://bassel.do.am/menu/menu3/img/8.png" alt="bassel" width="50"/></a></li> </ul> |
|
|
| مجموع التعليقات: 1 | |
|
| |
0
