ملف تعريفك على طريقة الكبار بتقنيتي jquery+css

Tweet

Pin It

معنا اليوم اضافة ساحرة بتقنية الجيكويري وال css
وهي لوحة منزلقة لملف تعريف لكن على طريقة الكبار



















للمعاينة


من دون اطالة نبدا لكن اذكر باهمية حفظ نسخة من القالب قبل اجراء اي تعديل

اولا كود html

<div class="panel">
    <h3>Sliding Panel</h3>
    <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
    <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

    <h3>A Little Something About Me</h3>
    <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
    <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div class="columns">
    <div class="colleft">
    <h3>Navigation</h3>
        <ul>
            <li><a href="http://spyrestudios.com/" title="home">Home</a></li>
            <li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
            <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
            <li><a href="http://spyrestudios.comcontact//" title="contact">Contact</a></li>
            <li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
        </ul>
    </div>

    <div class="colright">
        <h3>Social Stuff</h3>
        <ul>
            <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
            <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
            <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
            <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
            <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
        </ul>
    </div>
</div>
<div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>

 ولا تنسى تغيير مايجب تغييره




كود css

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAN2OC91FLfzxcA_KDmtGDZFJYWRtagE9dNh_oIlzAxFBSJYGJApRm0kOrc8Uhm2fPOlwVc9QlAspwvW8NKxYTsbdO6nboTWh_ADJZXj7A76UmeJJ4yxySBm3p_VeHX8qy9TIjbbdSebC8/d/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAN2OC91FLfzxcA_KDmtGDZFJYWRtagE9dNh_oIlzAxFBSJYGJApRm0kOrc8Uhm2fPOlwVc9QlAspwvW8NKxYTsbdO6nboTWh_ADJZXj7A76UmeJJ4yxySBm3p_VeHX8qy9TIjbbdSebC8/d/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdYCZgW45AvMdr137hHZiz6nxe_ZG9hDQRHXhl76oqmbaQDX7WVtVc1ot3L_y0NJhmhROJj1EihQ9uWpw4C3BVEdIAi-Tq7QwpcPzB0W_47KzmOOsm7wC25dOd269d9kW3vm1YYYWe8fD/d/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

واخيرا كود jquery

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>


  <script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

    //]]>

    </script>

المصدر



لقد تم طرح الاضافة من قبل على مدونة الفضاء التكنولوجي لكن صاحب الموضوع نقل اكواد html
بصيغة خاطئة











المدونة مفتوحة لتعليقاتكم واستفساراتكم

إشترك لتحصل على جديد المواضيع

يوسف بجاد

مدون عربي مهتم بالتقنية الحديثة وتطوير الويب مهتم بشكل خاص بمنصة بلوجر واجيد الى حد ما التعامل مع css.html.jquery

• http://twitter.com/youcefbijedbijed on twitter
• https://www.facebook.com/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D9%8A%D9%88%D8%B3%D9%81-%D8%A8%D8%AC%D8%A7%D8%AF/202331699846732bijed on facebook
• https://plus.google.com/101768571125800665500/postsbijed on google plus