无法将当前菜单转换为自举菜单

时间:2016-10-29 14:56:54

标签: php html mysql css twitter-bootstrap

好吧,目前我在我的数据库中有这个main_menu表。

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 29, 2016 at 04:49 PM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 5.6.20

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `database`
--

-- --------------------------------------------------------

--
-- Table structure for table `main_menu`
--

CREATE TABLE `main_menu` (
  `id` bigint(20) NOT NULL,
  `title` text COLLATE utf8_unicode_ci NOT NULL,
  `link` mediumtext COLLATE utf8_unicode_ci NOT NULL,
  `parentid` bigint(20) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `main_menu`
--
ALTER TABLE `main_menu`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `main_menu`
--
ALTER TABLE `main_menu`
  MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=53;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

我有这个代码来制作下拉菜单(不是自举)

<?php

error_reporting(0);
ini_set('display_errors', 0);

header('Content-Type: text/html; charset=utf-8');


	//Set the database connection
	// $con1 = mysqli_connect('localhost','root','');
	$con1 = mysqli_connect('localhost', '', '');

	// mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));
	mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));

	//select all rows from the main_menu table

	mysqli_query($con1, "SET NAMES utf8");	

	$result = mysqli_query($con1, "select id,title,parentid,link from main_menu order by id asc");

	//create a multidimensional array to hold a list of menu and parent menu
	$menu = array(
		'menus' => array(),
		'parent_menus' => array()
	);

	//build the array lists with data from the menu table
	while ($row = mysqli_fetch_assoc($result)) {
		//creates entry into menus array with current menu id ie. $menus['menus'][1]
		$menu['menus'][$row['id']] = $row;
		//creates entry into parent_menus array. parent_menus array contains a list of all menus with children
		$menu['parent_menus'][$row['parentid']][] = $row['id'];
	}

	mysqli_set_charset($con1,"utf8");
	
	// Create the main function to build milti-level menu. It is a recursive function.	
	function buildMenu($parent, $menu) {
	$html = "";
	if (isset($menu['parent_menus'][$parent])) {
		$html .= "<ul>";
		foreach ($menu['parent_menus'][$parent] as $menu_id) {
			if (!isset($menu['parent_menus'][$menu_id])) {
				$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a></li>";
			}
			if (isset($menu['parent_menus'][$menu_id])) {
				$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a>";
				$html .= buildMenu($menu_id, $menu);
				$html .= "</li>";
			}
		}
		$html .= "</ul>";
	}
	return $html;
}

?>

它一直工作到现在,但问题是我尝试将代码复制/粘贴到我最近购买的名为Karma的引导主题中,我无法弄清楚如何根据我的main_menu表制作菜单。

以下是示例引导导航代码

<div class="sidebar-module">
  <nav class="sidebar-nav-v2">
    <ul>
      <li class="page-arrow active-page">
        <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard <span class="indicator-pill">32</span></a>
      </li>
      <li>
        <a href="statistics.html"><i class="fa fa-sun-o"></i> Statistics<span class="indicator-dot">2</span></a>
      </li>
      <li>
        <a href="charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
      </li>
      <li>
        <a href="calendar.html"><i class="fa fa-calendar-o"></i> Calendar</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-envelope-o"></i> Form Elements <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="forms.html">Forms</a>
          </li>
          <li>
            <a href="forgot.html">Forgot Form</a>
          </li>
          <li>
            <a href="login.html">Login Form</a>
          </li>
          <li>
            <a href="login2.html">Login 2 Form</a>
          </li>
          <li>
            <a href="reset.html">Reset Form</a>
          </li>
          <li>
            <a href="signup.html">Signup Form</a>
          </li>
          <li>
            <a href="wizard.html">Wizard</a>
          </li>
          <li>
            <a href="wysiwyg.html">WYSIWYG</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-file-o"></i> Pages <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="comments.html">Comments</a>
          </li>
          <li>
            <a href="clients.html">Clients</a>
          </li>
          <li>
            <a href="faqs.html">FAQs</a>
          </li>
          <li>
            <a href="files.html">Files</a>
          </li>
          <li>
            <a href="planning.html">Planning</a>
          </li>
          <li>
            <a href="#">Social</a>
          </li>
          <li>
            <a href="ticketsupport.html">Ticket Support</a>
          </li>
          <li>
            <a href="timeline.html">Timeline</a>
          </li>
          <li>
            <a href="wiki.html">Wiki</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-star-o"></i> UI Elements<i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="buttonsandicons.html">Buttons &amp; Icons</a>
          </li>
          <li>
            <a href="notifications.html">Notifications</a>
          </li>
          <li>
            <a href="dropdownmenu.html">Dropdown &amp; Menu</a>
          </li>
          <li>
            <a href="misc.html">Misc</a>
          </li>
          <li>
            <a href="tabs.html">Tabs</a>
          </li>
          <li>
            <a href="toolbars.html">Toolbars</a>
          </li>
        </ul>
      </li>
      <li class="seperator">
        <!-- * seperator line * -->
      </li>
      <li>
        <a href="media.html"><i class="fa fa-picture-o"></i> Media</a>
      </li>
      <li>
        <a href="modules.html"><i class="fa fa-wrench"></i> Modules</a>
      </li>
      <li>
        <a href="tables.html"><i class="fa fa-table"></i> Tables</a>
      </li>
      <li>
        <a href="pagelayout.html"><i class="fa fa-th"></i> Page Layout</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-warning"></i> Error Pages <i class="fa fa-caret-left pull-right"></i></a>

        <!-- * sub menu * -->
        <ul>
          <li>
            <a href="400.html">400</a>
          </li>
          <li>
            <a href="401.html">401</a>
          </li>
          <li>
            <a href="403.html">403</a>
          </li>
          <li>
            <a href="404.html">404</a>
          </li>
          <li>
            <a href="500.html">500</a>
          </li>
          <li>
            <a href="503.html">503</a>
          </li>
        </ul>

      </li>
      <li class="menu-label">
        <div class="spacer-20"></div>
        Some group label
        <div class="spacer-10"></div>
      </li>
      <li>
        <a href="maps.html"><i class="fa fa-map-marker"></i> Maps</a>
      </li>
      <li>
        <a href="widgets.html"><i class="fa fa-columns"></i> Widgets</a>
      </li>
      <li>
        <a href="sitemap.html"><i class="fa fa-sitemap"></i> Sitemap</a>
      </li>
    </ul>
  </nav>
  <!-- End .sidebar-nav-v1 -->
</div>
<!-- End .sidebar-module -->

有人可以帮助我将旧菜单转换为自举导航吗?

1 个答案:

答案 0 :(得分:0)

你的html代码中没有bootstrap下拉类。这是片段。确保在代码中包含jquery,bootstrap(包含在此代码段中),链接标记位于body标记下的head标记和script标记下。

&#13;
&#13;
<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textStyle="bold"
    android:typeface="sans" />

<TextView
    android:id="@+id/price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/title"
    android:layout_marginTop="5dip"
    android:textColor="#343434"
    android:textSize="12sp" />

<TextView
    android:id="@+id/date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/price"
    android:layout_alignBottom="@+id/price"
    android:layout_alignParentRight="true"
    android:textColor="#343434"
    android:textSize="12sp" />
&#13;
.navbar-nav > li:hover ul.dropdown-menu, .menu li:hover ul.dropdown-menu{
  display: block;
&#13;
&#13;
&#13;

基本上你的HTML代码应该看起来像这个图像enter image description here