منوی آکاردیون زیبا و مدرن

اگر قصد دارید وبسایتی زیبا و کاربر پسند داشته باشید این منو بهترین انتخاب شما خواهد بود.

آموزش استفاده

قبل از تگ <head/> فراخوانی css و jquery

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/ch3mical.css">
    <script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"> </script>
  <script src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/ch3mical.js" charset="utf-8"> </script>
    <title>jQuery Slide accordion menu</title>

بعد از تگ body کدهای html و jquery

 <div id="container">
      <h1>htmldrive</h1>
      <ul id="centerwell">
         <li id="behance">
            <h3><a href="#" target="_blank">Behance</a></h3>
            <p>Take a look at my portfolio, let me know whatcha think. </p>
         </li>
         <li id="flicker">
            <h3><a href="#" target="_blank">Flicker</a></h3>
             <p>See what I've been up to with my camera.</p>
         </li>
         <li id="linkedin">
            <h3><a href="#" target="_blank">LinkedIn</a></h3>
             <p>Hit me up, I'm always looking to make new connections.</p>
         </li>
         <li id="facebook">   
            <h3><a href="#" target="_blank">Facebook</a></h3>
             <p>I have to admit I check it at least once a day.</p>
         </li>
         <li id="twitter">
            <h3><a href="#" target="_blank">Twitter</a></h3>
             <p>I'm more of a voyeur here, but when I do say something ...</p>
         </li>
         <li id="resume">
            <h3><a href="#" target="_blank">Resume</a></h3>
             <p>Download in PDF format. References given upon request.</p>
         </li>
         <li id="email">
            <h3><a href="#">Email</a></h3>
             <p>pk@ch3mical.com</p>
         </li>
         <li id="contact">
            <h3><a href="#" target="_blank">Contact</a></h3>
             <p>Phone: 248 760 6301<br>
                Location: Detroit, MI</p>
         </li>
      </ul><!-- centerwell -->
      <div id="content">

      </div>    
   </div><!-- container -->  
</div><!-- main -->