كود CSSكود css يفتح اخر المواضيع بطريقة رائعة تقنية جديدة
لفتح
عنصر اخر المواضيع او اي عنصر اخر بمجرد مرور الماوس عليه
واخذت لكم
عينة لاخر المواضيع
صورة للكود
وعند مرور الماوس على صورة المواضيع الاخير
تفتح
تلقائيا
ما عليك سوى
الذهاب
الى
لوحة الادارة
مظهر المنتدى
الالوان
ورقة التصميم cssوضع هذا الكود
الرمز: |
#content-container div#right { background-image: url('https://i.servimg.com/u/f40/16/60/81/99/top_1010.png'); background-position: right top; background-repeat:no-repeat; padding-right: 30px; margin: 0px; width: 80px; height: 200px; font-size: 0px; float: left; overflow: hidden; } #content-container div#right:hover { width: 180px; height: 225px; font-size: 12px; font-weight: bold; float: left; overflow: hidden; border-top: 2px double #000000; border-right: 2px double #000000; border-bottom: 2px double #000000; border-left: 0px double #; padding: 0px; }
#right { position: absolute; position: fixed; left: -80px; top: 40%; overflow: hidden; } #right:hover { position: absolute; position: fixed; left: 0px; top: 40%; overflow: hidden; } #right div.borderwrap div.box-content { background-image: url('https://i.servimg.com/u/f40/16/60/81/99/top_1010.png'); background-position: left top; background-repeat: no-repeat; margin-top: 0px; padding-top: 0px; padding-left: 20px; } #right div.borderwrap div.box-content .row1 { background-image: none; background-color: transparent; border: none; width: 50%; margin-top: 0px; padding-top: 0px; line-height: 149%; } #right div.borderwrap div.box-content .row2 { background-image: none; background-color: transparent; border: none; width: 50%; padding-top: 0px; margin-top: 0px; line-height: 149%; }
/* Google Chrome and Safari 3.1 */ body:nth-of-type(1) #right div.borderwrap div.box-content .row1 { background-image: none; background-color: transparent; border: none; width: 50%; margin-top: 0px; padding-top: 0px; line-height: 150%; }
/* Google Chrome and Safari 3.1 */ body:nth-of-type(1) #right div.borderwrap div.box-content .row2 { background-image: none; background-color: transparent; border: none; width: 50%; padding-top: 0px; margin-top: 0px; line-height: 150%; }
|
ولا ننسى نغير صورة
https://i.servimg.com/u/f40/16/60/81/99/top_1010.png
بالصورة
المناسبة
الخطوى
الثانية التوجه الى لوحة
الادارة
عناصر اضافية
ادارة العناصر المستقلة على المنتدىوتطبيق ما في الصورة