.:: عضو متألق ::.
بيانات موقعي
اسم الموقع : مدوّنتي
اصدار المنتدى : لا أملك منتدى
شرح عمل قائمـــة دائرية عن طريق CSS 3
متوافقة مع :
IE9, FireFox, Safari, Chrome, and Opera 9
مثال :
أمثلة مباشرة :
مثال 1
مثال 2
الأكواد :
كود html
رمز PHP:
< div class= "circlemenu" > < ul > < li >< a href = "http://www.traidnt.net" >< span > رابط 1 </ span ></ a ></ li > < li >< a href = "http://www.traidnt.net" >< span > رابط 2 </ span ></ a ></ li > < li >< a href = "http://www.traidnt.net" >< span > رابط 3 </ span ></ a ></ li > < li >< a href = "http://www.traidnt.net" >< span > رابط 4 </ span ></ a ></ li > < li >< a href = "http://www.traidnt.net" >< span > رابط 5 </ span ></ a ></ li > </ ul > </ div >
كود Css
رمز PHP:
< style type = "text/css" > . circlemenu { width : 100 %; overflow : hidden ; }
. circlemenu ul { margin : 0 ; padding : 0 ; font : bold 14px Verdana ; list- style - type : none ; text - align : center ; /* "left", "center", or "right" align menu */ } . circlemenu li { display : inline ; margin : 0 ; } . circlemenu li a { display : inline - block ; text - align : center ; text - decoration : none ; color : white ; background : #b72d23; margin : 0 ; margin - right : 5px ; /*right spacing between each link */ width : 100px ; height : 100px ; border - radius : 400px ; /*really large border radius to create round borders*/ - moz - border - radius : 400px ; - webkit - border - radius : 400px ; } . circlemenu a span { position : relative ; top : 40 %; } . circlemenu li a : visited { color : white ; } . circlemenu a : hover { background : #a71b15; } </ style >
يمكن التحكم بحجم الدائرة عن طريق تصغير وتكبير الأبعاد
width:100px
height:100px
..
توقيع Mr.Ez3aj
إذا اشتكي مسلم في الصين أرقني وإن بكى مسلم في الهند أبكاني
ومصر ريحانتي والشام نرجستي وفي الجزيرة تاريخي وعنواني
وحيثما ذكر اسم الله في بلد عددت أرجاءه من صلب أوطاني