شرح طريقة عمل قائمـة دائرية عن طريق CSS 3

[romaissa]

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط¹ظ…ظ„ ظ‚ط§ط¦ظ…ظ€ط© ط¯ط§ط¦ط±ظٹط© ط¹ظ† ط·ط±ظٹظ‚ CSS 3 (http://www.dzbatna.com/t1826337/)



شرح طريقة عمل قائمـــة دائرية عن طريق CSS 3

متوافقة مع :
IE9, FireFox, Safari, Chrome, and Opera 9


مثال :
http://dzbatna.net/vb/attachment.php?attachmentid=564320&stc=1&d=1301689046

أمثلة مباشرة :
مثال 1 (http://www.l5ma.com/demo/CSS3_Circle_Menu_2.html)
مثال 2 (http://www.l5ma.com/demo/CSS3_Circle_Menu.html)


الأكواد :

كود code html
رمز PHP:

<code style="white-space:nowrap"> <code> <div class="circlemenu">
<ul>
<li><a href="http://www.dzbatna.net"><span>رابط 1</span></a></li>
<li><a href="http://www.dzbatna.net"><span>رابط 2</span></a></li>
<li><a href="http://www.dzbatna.net"><span>رابط 3</span></a></li>
<li><a href="http://www.dzbatna.net"><span>رابط 4</span></a></li>
<li><a href="http://www.dzbatna.net"><span>رابط 5</span></a></li>
</ul>
</div>
</code> </code>

كود code Css

رمز PHP:

<code style="white-space:nowrap"> <code> <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>
</code> </code>

يمكن التحكم بحجم الدائرة عن طريق تصغير وتكبير الأبعاد
width:100px
height:100px


..












ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©