0 Replies Latest reply on Jun 2, 2010 3:14 AM by GoFuCheng

    How to get this Jquery menu more closer?

    GoFuCheng



       
      }css_problem.png

       

      I have this problem, I have many many items on the parent level,

      but I dont' hope the menu to have 2 lines.

      So I need get these parent items more closer.

       

      I found that this css block could control the width of the item

      #menu ul.menu li {
        display: inline-block;
        height: 57px;
        position: relative;
       
      /* if i add : width: 50px; here, I could control the width of parent items */
       
      }

       

      but it's very strange, if I add " width:auto; " there will be nothing change,

      obviously, the width of every parent item has been set as ''atuo'

       

      but auto is not enough, I need the width is more narrow more than " auto"

      I had even tried "auto-3px", it seems to be not working...

       

      below is the html code and css code:

       

      HTML CODE:

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <link type="text/css" href="menu.css" rel="stylesheet" />
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript" src="menu.js"></script>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>無標題文件</title>
      <style type="text/css">
      <!--
      -->
      </style>
      </head>

       

      <body>
      <div id="background">
      <div id="menu">
              <ul class="menu">
                  <li><a href="#" class="parent"><span>首頁</span></a></li>
                  <li><a href="#"><span>學術榮譽</span></a>    </li>
                  <li><a href="#"><span>學術活動</span></a>
                      <div>
                          <ul>
                                  <li><a href="membership.php"><span>國際會員資格</span></a>
                                <li><a href="inter_journal_reviewer.php"><span>擔任國際論文審查</span></a>

       

                                <li><a href="academic_distri.php"><span>學術貢獻</span></a>
                          </ul>
                      </div>
                  </li>
                  <li><a class="parent" href="#"><span>研究計畫</span></a>
                  <div
                      <ul>
                            <li><a href="research_project.php"><span>研究計畫</span></a></li>
                           <li><a href="industry_project.php"><span>產學合作</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                  <li><a class="parent" href="#"><span>學術著作</span></a>
                  <div
                      <ul>
                            <li><a href="journal_paper.php"><span>International Journal Paper</span></a></li>
                           <li><a href="book_chapter.php"><span>Book Chapter</span></a></li>
                           <li><a href="international_conference_paper.php"><span>International Conference Paper</span></a></li>
                           <li><a href="local_journal.php"><span>Local Journal and Conference</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                   <li><a class="parent" href="#"><span>指導學生</span></a>
                  <div
                      <ul>
                            <li><a href="student_graduated_school.php"><span>碩士班</span></a></li>
                           <li><a href="student_college.php"><span>大學生專題</span></a></li>
                           <li><a href="student_nsc.php"><span>大專生國科會計畫</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                   <li><a class="parent" href="academic_speech.php"><span>學術演講</span></a></li>
                   <li><a class="parent" href="timetable.php"><span>周課表</span></a></li>
                  
                  
                   <li><a class="parent" href="#"><span>著書</span></a>
                  <div
                      <ul>
                            <li><a href="http://isrc.nchu.edu.tw/ins/" target="_blank"><span>資訊與網路安全概論</span></a></li>
                           <li><a href="challenge_image_book.php" target="_blank"><span>挑戰影像處理</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                    <li><a class="parent" href="http://140.120.54.229/moodle/" target="_blank"><span>詠章老師教學網</span></a></li>
                   
                     <li><a class="parent" href="#"><span>開放式課程</span></a>
                  <div
                      <ul>
                            <li><a href="http://140.120.2.227/nchu_oc/OCW/index.php" target="_blank"><span>中興大學開放式課程</span></a></li>
                           <li><a href="http://140.113.9.70/index.php" target="_blank"><span>OCW聯盟</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                   <li><a class="parent" href="#"><span>推動學程</span></a>
                  <div
                      <ul>
                            <li><a href="http://mis.nchu.edu.tw/xoops/modules/tinyd04/study-01.html" target="_blank"><span>資訊安全管理與應用學程</span></a></li>
                           <li><a href="http://mis.nchu.edu.tw/xoops/modules/tinyd04/study-07.html" target="_blank"><span>RFID物流與供應鏈學程</span></a></li>
                            <li><a href="http://www.pda.nchu.edu.tw/drupal6/" target="_blank"><span>數位典藏學程</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                   <li><a class="parent" href="#"><span>實驗室連結</span></a>
                  <div
                      <ul>
                            <li><a href="http://140.120.54.114/" target="_blank"><span>運動資訊管理研究室</span></a></li>
                           <li><a href="http://140.120.54.229/ins2/intro_lab.php" target="_blank"><span>資訊與網路安全實驗室</span></a></li>
                      </ul>
                  </div>
                   </li>
                 
                   <li><a class="parent" href="zenphoto/index.php" target="_blank"><span>相簿</span></a></li>
                  
                    <li><a class="parent" href="admin/admin_login.php"><span>登入</span></a></li>
                     <li><a class="parent" href="index_english.php"><span>English</span></a></li>
                 
      </ul>
          </div>
          </div>
      </body>
      </html>

       

       

       

       

       

       

       

       

       

       

       

      ****************************************************************************************** ****************************

       

       

       

      CSS CODE:

       

      /**
      *********************************************
      * Prototype of styles for horizontal CSS-menu
      * @data 25.01.2010
      *********************************************
      * (X)HTML-scheme:
      *  <div id="menu">
      *      <ul class="menu">
      *          <li><a href="#" class="parent"><span>level 1</span></a>
      *              <div><ul>
      *                  <li><a href="#" class="parent"><span>level 2</span></a>
      *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
      *                  </li>
      *              </ul></div>
      *          </li>
      *          <li class="last"><a href="#"><span>level 1</span></a></li>
      *      </ul>
      *  </div>
      *********************************************
      */
      /** Selectors **/

       

      /* Reset */
      body{padding:0px; margin:0px;}
      #background{
      background-image: url("images/header-bg2.png") ;
      height:251px;
      background-repeat:no-repeat;
      background-position:center top;

       



          }
      #menu * {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        text-decoration: none;

       

       
      }
      div#menu {
      position:relative;
      width:986px;

       

      top:251px;
      margin:0 auto;}
      #menu ul.menu {
        white-space: nowrap;
      }

       


      /* Geometrical arrangement這裡就是調整父選單的寬度 */
      #menu ul.menu li {
        display: inline-block;
        height: 57px;
        position: relative;
       

       
      }

       

      #menu ul.menu li div {
        position: absolute;
        top: 55px;
        left: 0px;
      }

       

      #menu ul.menu li div div {
        position: absolute;
        top: -6px;
        left: 176px;
      }

       

      /* Escaping style for lower levels  這裡是子選單文字的寬度*/
      #menu ul.menu li div ul li {
        display: block;
        float: none;
        width: auto;
        height: auto;
      }
      /*上面width 本來是auto */

       

      /** Graphics **/

       

      /* Horizontal sliding doors */
      #menu ul.menu li a {
        padding-left: 5px;
          background-image: url("images/menu_level1_item.png");
        background-repeat: no-repeat;
        background-position: left -1000px;
        display: inline-block;
        margin: 6px 2px;

       

      }
      /*  上面的原始備份

       

      #menu ul.menu li a {
        padding-left: 15px;
        background-image: url("images/menu_level1_item.png");
        background-repeat: no-repeat;
        background-position: left -1000px;
        display: inline-block;
        margin: 6px 2px;
      }

       

      */

       

      #menu ul.menu li a span {
        padding-right: 5px;
        padding-left: 0px;
        background-image: url("images/menu_level1_item.png");
        background-repeat: no-repeat;
        background-position: right -1000px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
      }
      /*上面的padding-right原本是15px*/

       

      #menu ul.menu li:hover a {
        background-position: left -90px;
      }

       

      #menu ul.menu li:hover a span {
        background-position: right -135px;
      }

       

      #menu ul.menu li.active a {
        background-position: left 0px;
      }

       

      #menu ul.menu li.active a span {
        background-position: right -45px;
      }

       

      /* Escape Horizontal doors */
      #menu ul.menu li div ul li a {
        display: block;
        padding: 0px;
        margin: 0px;
        background: none;
      }

       

      #menu ul.menu li div ul li a span {
        display: block;
        padding: 0px;
        background: none;
        height: auto;
        line-height: 25px;
        padding: 10px 0 10px 12px;
        white-space: normal; 
      }

       

      /* Vertical sliding doors */
      #menu ul.menu li div {
        width: 194px;
        padding-top: 6px;
        background-image: url("images/submenu-top.png");
        background-repeat: no-repeat;
        background-position: 0px top;
      }

       

      #menu ul.menu li div ul {
        padding: 9px;
        padding-top: 0;
        background-image: url("images/submenu-bottom.png");
        background-repeat: no-repeat;
        background-position: 0px bottom;
      }

       

      /* Hover Effect on Submenus */
      #menu ul.menu ul li:hover
      {
        background-repeat: repeat-x;
        background-position: 0% 100%;
        background-image: url(images/menu_level2_item_hover.png);
      }

       

      #menu ul.menu ul li:hover>a
      {
        background-repeat: repeat-x;
        background-position: 0% 0%;
        background-color: transparent;
        background-image: url(images/menu_level2_item_hover.png);
      }

       


      /* Main header line */
      #menu {
        height: 57px;
        padding-left: 14px;
        background:transparent url(images/page_header_b.png) repeat-x;
      }

       

      /* Text shadow */
      #menu span
      {
        color: #edf0f1;
        text-shadow:0 -1px 1px #000000;
      }

       

      #menu li:hover>a>span
      {
        color: #ffffff;
        text-shadow: 0 1px 1px #000000, 0 2px 10px #969696;
      }

       

      /* Fonts */
      #menu ul.menu li a span
      {
        font-family: Arial;
        font-size: 13px;
        font-weight: 400;
      }

       

      #menu ul.menu li div ul li a span
      {
        font-family: Arial;
        font-size: 13px;
        font-weight: 400;
      }

       

      /* Lines between li */
      #menu ul.menu li div ul
      {
        padding-bottom: 8px;
      }

       

      #menu ul.menu li div ul li:first-child
      {
        border-top-width: 0px;
      }

       


      /* Menu logic */
      #menu li>div { visibility: hidden; }
      #menu li:hover>div { visibility: visible; }
      /* */

       

      /* Hover Effect on Submenus */
      #menu ul.menu ul li:hover
      {
        background-color: #393c45;
      }

       

      /* Lines between li */
      #menu ul.menu li div ul li
      {
        border-bottom: 1px solid #70757b;
        border-top: 1px solid #31363b;
      }

       

      /* ie7 */
      #menu ul.menu li {
        *zoom: 1;
        *display: inline;
      }

       

      #menu ul.menu li a {
        *zoom: 1;
        *display: inline;
      }

       

      #menu ul.menu li a span {
        *zoom: 1;
        *display: inline;
      }

       

      #menu ul.menu li div ul li a {
        *display: inline;
      }

       

      /* Discarding semi-transparency */
      #menu ul.menu ul li:hover
      {
        *background-image: none;
      }

       

      #menu ul.menu ul li:hover>a
      {
        *background-image: none;
      }

       

      /* IE6 */
      #menu ul.menu li a {
        _background-image: url("images/menu_level1_item.gif");
      }

       

      #menu ul.menu li a span {
        _background-image: url("images/menu_level1_item.gif");
      }

       

      #menu ul.menu li div {
        _background-image: url("images/submenu-top.gif");
      }

       

      #menu ul.menu li div ul {
        _background-image: url("images/submenu-bottom.gif");
      }

       

      #menu ul.menu li a:hover {
        _background-position: left -90px;
      }

       

      #menu ul.menu li a:hover span {
        _background-position: right -135px;
      }

       

      /* Menu logic for IE6 */
      #menu div { _display: none; }
      #menu div li:hover div { _display: block; }
      #menu div li:hover li:hover div { _display: block; }
      #menu div li:hover li:hover li:hover div { _display: block; }
      /* */

       

       

       

       

       

       

       

       

       

       

      anybody could help me?

      I know this may cost some time,

      thank in advance.