多级子菜单

时间:2016-10-30 15:08:40

标签: php jquery css

我正在尝试创建一个多级子菜单。

我只能使用此代码显示一个子级菜单。

如何增加代码以插入具有父ID的系统?

我的代码比我正在努力开发。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: "Comic Sans MS", cursive;
    font-size: 15px;
    color: #232323;
  }

  #head {
    background: #f9f9f9;
    height: 100px;
    padding-top: 15px;
    border-bottom: 1px solid #d5dce8;
  }
  .wrap {
    width: 1000px;
    margin: 0 auto;
  }
  #head h1
  {
    float:left;
  }
  #head a
  {
    float:right;
  }
  input,select
  {
    width:300px;
    height:35px;
  }

  /* nav menu */
  #nav {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #d5dce8;
    border-right: 1px solid #d5dce8;
    border-bottom: 1px solid #d5dce8;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    background: #f9f9f9;
  }
  #nav li {
    float: left;
    display: block;
    background: none;
    position: relative;
    z-index: 999;
    margin: 0 1px;
  }
  #nav li a {
    display: block;
    padding: 0;
    font-weight: 700;
    line-height: 50px;
    text-decoration: none;
    color: #818ba3;
    zoom: 1;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0px 12px;
  }
  #nav li a:hover, #nav li a.hov {
    background-color: #fff;
    border-left: 1px solid #d5dce8;
    border-right: 1px solid #d5dce8;
    color: #576482;
  }
  /* subnav */
  #nav ul {
    position: absolute;
    left: 1px;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    padding-bottom: 3px;
  }
  #nav ul li {
    width: 180px;
    float: left;
    border-top: 1px solid #fff;
    text-align: left;
  }
  #nav ul li:hover {
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
  }
  #nav ul a {
    display: block;
    height: 20px;
    line-height: 20px;
    padding: 8px 5px;
    color: #666;
    border-bottom: 1px solid transparent;
    text-transform:  uppercase;
    color: #797979;
    font-weight: normal;
  }
  #nav ul a:hover {
    text-decoration: none;
    border-right-color: transparent;
    border-left-color: transparent;
    background: transparent;
    color: #4e4e4e;
  }
</style>
<script type="text/javascript">
  $(document).ready(function()
  {
    $('#nav li').hover(function()
    {
      $('ul', this).slideDown('fast');
    }, function()
    {
      $('ul', this).slideUp('fast');
    });
  });
</script>


<div class="wrap">
  <ul id="nav">
<?php
  // Select all entries from the menu table
  $Qmenus = $Db->prepare('SELECT a.id, 
                                 a.link, 
                                 a.parent, 
                                 a.class,
                                 a.sort_order,
                                 amd.label 
                          FROM :table_administrator_menu a,
                               :table_administrator_menu_description amd
                          where a.id = amd.id
                          and amd.language_id = :language_id
                          ORDER BY a.parent, 
                          a.sort_order
                         ');

  $Qmenus->bindInt(':language_id', $OSCOM_Language->getId());
  $Qmenus->execute();

  while($Qmenus->fetch()){
 ?>
    <li class="<?php $Qmenus->value('class'); ?>"><a href="<?php echo $Qmenus->value('link'); ?>"><?php echo $Qmenus->value('label'); ?></a>
<?php
  // Select all entries from the menu table
  $QsubMenus = $Db->prepare('SELECT sm.id, 
                                    sm.link, 
                                    sm.parent, 
                                    sm.class,
                                    smd.label,
                                    sm.sort_order
                              FROM :table_administrator_sub_menu sm,
                                       :table_administrator_sub_menu_description smd
                              where sm.sub_menu_id = smd.sub_menu_id
                              and smd.language_id = :language_id
                              order by sm.parent, 
                              sm.sort_order
                            ');

  $QsubMenus->bindInt(':language_id', $OSCOM_Language->getId());
  $QsubMenus->execute()
?>
      <ul>
<?php
    while($QsubMenus->fetch()) {
?>
        <li class="<?php $QsubMenus->value('class'); ?>"><a href="<?php echo $QsubMenus->value('link'); ?>"><?php echo $QsubMenus->value('label'); ?></a></li><?php
    }
?>
      </ul>
    </li>
<?php
  }
?>
</ul>
</div>

0 个答案:

没有答案