eepersian

تبدیل مگامنوی HTML به مگامنو وردپرس

1 پست در این موضوع قرار دارد

با سلام خدمت دوستان

من یک قالب HTML دارم که منوی " مگامنو" داره

می خواستم این مگامنو رو در پوسته وردپرسی که دارم طراحی می کنم ، پیاده سازی کنم

اگر امکان داره یکی از دوستان زحمت تبدیلش رو بکشه ،

اگر تبدیل نمیکنید ، بگین که مراحل کار چیه ؟ آیا باید حتماً از افزونه های مرتبط با مگا منو استفاده بشه ؟

اگر فقط تنظیمات wp_nav_menu رو درست انجام بدم کافیه و نیازی به افزونه نیست ؟ (در این حالت ترتیب گزینه های مگامنو در قسمت فهرست وردپرس چطور تنظیم میشن ؟)

اینم از کد HTML مگامنو :


<div class="page-header-menu" style="display: block;">
<div class="container-fluid">
<!-- BEGIN HEADER SEARCH BOX -->
<form class="search-form" action="page_general_search.html" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="query">
<span class="input-group-btn">
<a href="javascript:;" class="btn submit">
<i class="icon-magnifier"></i>
</a>
</span>
</div>
</form>
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN MEGA MENU -->
<!-- DOC: Apply "hor-menu-light" class after the "hor-menu" class below to have a horizontal menu with white background -->
<!-- DOC: Remove data-hover="dropdown" and data-close-others="true" attributes below to disable the dropdown opening on mouse hover -->
<div class="hor-menu ">
<ul class="nav navbar-nav">
<li class="menu-dropdown classic-menu-dropdown ">
<a href="javascript:;"> Dashboard
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class=" ">
<a href="index.html" class="nav-link ">
<i class="icon-bar-chart"></i> Default Dashboard
<span class="badge badge-success">1</span>
</a>
</li>
<li class=" ">
<a href="dashboard_2.html" class="nav-link ">
<i class="icon-bulb"></i> Dashboard 2 </a>
</li>
<li class=" ">
<a href="dashboard_3.html" class="nav-link ">
<i class="icon-graph"></i> Dashboard 3
<span class="badge badge-danger">3</span>
</a>
</li>
</ul>
</li>
<li class="menu-dropdown mega-menu-dropdown ">
<a href="javascript:;"> UI Features
<span class="arrow"></span>
</a>
<ul class="dropdown-menu" style="min-width: 710px">
<li>
<div class="mega-menu-content">
<div class="row">
<div class="col-md-4">
<ul class="mega-menu-submenu">
<li>
<a href="ui_colors.html"> Color Library </a>
</li>
<li>
<a href="ui_general.html"> General Components </a>
</li>
<li>
<a href="ui_buttons.html"> Buttons </a>
</li>
<li>
<a href="ui_confirmations.html"> Popover Confirmations </a>
</li>
<li>
<a href="ui_icons.html"> Font Icons </a>
</li>
<li>
<a href="ui_socicons.html"> Social Icons </a>
</li>
<li>
<a href="ui_typography.html"> Typography </a>
</li>
<li>
<a href="ui_tabs_accordions_navs.html"> Tabs, Accordions & Navs </a>
</li>
<li>
<a href="ui_tree.html"> Tree View </a>
</li>
<li>
<a href="maps_google.html"> Google Maps </a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="mega-menu-submenu">
<li>
<a href="maps_vector.html"> Vector Maps </a>
</li>
<li>
<a href="ui_timeline.html"> Timeline </a>
</li>
<li>
<a href="ui_page_progress_style_1.html"> Page Progress Bar - Flash </a>
</li>
<li>
<a href="ui_page_progress_style_2.html"> Page Progress Bar - Big Counter </a>
</li>
<li>
<a href="ui_blockui.html"> Block UI </a>
</li>
<li>
<a href="ui_bootstrap_growl.html"> Bootstrap Growl Notifications </a>
</li>
<li>
<a href="ui_notific8.html"> Notific8 Notifications </a>
</li>
<li>
<a href="ui_toastr.html"> Toastr Notifications </a>
</li>
<li>
<a href="ui_bootbox.html"> Bootbox Dialogs </a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="mega-menu-submenu">
<li>
<a href="ui_alerts_api.html"> Metronic Alerts API </a>
</li>
<li>
<a href="ui_session_timeout.html"> Session Timeout </a>
</li>
<li>
<a href="ui_idle_timeout.html"> User Idle Timeout </a>
</li>
<li>
<a href="ui_modals.html"> Modals </a>
</li>
<li>
<a href="ui_extended_modals.html"> Extended Modals </a>
</li>
<li>
<a href="ui_tiles.html"> Tiles </a>
</li>
<li>
<a href="ui_datepaginator.html"> Date Paginator </a>
</li>
<li>
<a href="ui_nestable.html"> Nestable List </a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="menu-dropdown classic-menu-dropdown active">
<a href="javascript:;"> Layouts
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class=" ">
<a href="layout_mega_menu_light.html" class="nav-link "> Light Mega Menu </a>
</li>
<li class=" ">
<a href="layout_top_bar_light.html" class="nav-link "> Light Top Bar Dropdowns </a>
</li>
<li class=" ">
<a href="layout_fluid_page.html" class="nav-link "> Fluid Page </a>
</li>
<li class=" ">
<a href="layout_top_bar_fixed.html" class="nav-link "> Fixed Top Bar </a>
</li>
<li class=" ">
<a href="layout_mega_menu_fixed.html" class="nav-link "> Fixed Mega Menu </a>
</li>
<li class=" ">
<a href="layout_disabled_menu.html" class="nav-link "> Disabled Menu Links </a>
</li>
<li class=" active">
<a href="layout_blank_page.html" class="nav-link active"> Blank Page </a>
</li>
</ul>
</li>
<li class="menu-dropdown mega-menu-dropdown mega-menu-full">
<a href="javascript:;"> Components
<span class="arrow"></span>
</a>
<ul class="dropdown-menu" style="min-width: ">
<li>
<div class="mega-menu-content">
<div class="row">
<div class="col-md-3">
<ul class="mega-menu-submenu">
<li>
<h3>Components 1</h3>
</li>
<li>
<a href="components_date_time_pickers.html"> Date & Time Pickers </a>
</li>
<li>
<a href="components_color_pickers.html"> Color Pickers </a>
</li>
<li>
<a href="components_select2.html"> Select2 Dropdowns </a>
</li>
<li>
<a href="components_bootstrap_select.html"> Bootstrap Select </a>
</li>
<li>
<a href="components_multi_select.html"> Multi Select </a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="mega-menu-submenu">
<li>
<h3>Components 2</h3>
</li>
<li>
<a href="components_bootstrap_select_splitter.html"> Select Splitter </a>
</li>
<li>
<a href="components_typeahead.html"> Typeahead Autocomplete </a>
</li>
<li>
<a href="components_bootstrap_tagsinput.html"> Bootstrap Tagsinput </a>
</li>
<li>
<a href="components_bootstrap_switch.html"> Bootstrap Switch </a>
</li>
<li>
<a href="components_bootstrap_maxlength.html"> Bootstrap Maxlength </a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="mega-menu-submenu">
<li>
<h3>Components 3</h3>
</li>
<li>
<a href="components_bootstrap_fileinput.html"> Bootstrap File Input </a>
</li>
<li>
<a href="components_bootstrap_touchspin.html"> Bootstrap Touchspin </a>
</li>
<li>
<a href="components_form_tools.html"> Form Widgets & Tools </a>
</li>
<li>
<a href="components_context_menu.html"> Context Menu </a>
</li>
<li>
<a href="components_editors.html"> Markdown & WYSIWYG Editors </a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="mega-menu-submenu">
<li>
<h3>Components 4</h3>
</li>
<li>
<a href="components_code_editors.html"> Code Editors </a>
</li>
<li>
<a href="components_ion_sliders.html"> Ion Range Sliders </a>
</li>
<li>
<a href="components_noui_sliders.html"> NoUI Range Sliders </a>
</li>
<li>
<a href="components_knob_dials.html"> Knob Circle Dials </a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="menu-dropdown classic-menu-dropdown ">
<a href="javascript:;"> More
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-settings"></i> Form Stuff
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="form_controls.html" class="nav-link "> Bootstrap Form
<br>Controls </a>
</li>
<li class=" ">
<a href="form_controls_md.html" class="nav-link "> Material Design
<br>Form Controls </a>
</li>
<li class=" ">
<a href="form_icheck.html" class="nav-link "> iCheck Controls </a>
</li>
<li class=" ">
<a href="form_layouts.html" class="nav-link "> Form Layouts </a>
</li>
<li class=" ">
<a href="form_editable.html" class="nav-link "> Form X-editable </a>
</li>
<li class=" ">
<a href="form_wizard.html" class="nav-link "> Form Wizard </a>
</li>
<li class=" ">
<a href="form_validation.html" class="nav-link "> Form Validation </a>
</li>
<li class=" ">
<a href="form_image_crop.html" class="nav-link "> Image Cropping </a>
</li>
<li class=" ">
<a href="form_fileupload.html" class="nav-link "> Multiple File Upload </a>
</li>
<li class=" ">
<a href="form_dropzone.html" class="nav-link "> Dropzone File Upload </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-briefcase"></i> Tables
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle"> Static Tables
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="">
<a href="table_static_basic.html" class="nav-link "> Basic Tables </a>
</li>
<li class="">
<a href="table_static_responsive.html" class="nav-link "> Responsive Tables </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle"> Datatables
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="">
<a href="table_datatables_managed.html" class="nav-link "> Managed Datatables </a>
</li>
<li class="">
<a href="table_datatables_buttons.html" class="nav-link "> Buttons Extension </a>
</li>
<li class="">
<a href="table_datatables_colreorder.html" class="nav-link "> Colreorder Extension </a>
</li>
<li class="">
<a href="table_datatables_rowreorder.html" class="nav-link "> Rowreorder Extension </a>
</li>
<li class="">
<a href="table_datatables_scroller.html" class="nav-link "> Scroller Extension </a>
</li>
<li class="">
<a href="table_datatables_fixedheader.html" class="nav-link "> FixedHeader Extension </a>
</li>
<li class="">
<a href="table_datatables_responsive.html" class="nav-link "> Responsive Extension </a>
</li>
<li class="">
<a href="table_datatables_editable.html" class="nav-link "> Editable Datatables </a>
</li>
<li class="">
<a href="table_datatables_ajax.html" class="nav-link "> Ajax Datatables </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="?p=" class="nav-link nav-toggle ">
<i class="icon-wallet"></i> Portlets
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="portlet_boxed.html" class="nav-link "> Boxed Portlets </a>
</li>
<li class=" ">
<a href="portlet_light.html" class="nav-link "> Light Portlets </a>
</li>
<li class=" ">
<a href="portlet_solid.html" class="nav-link "> Solid Portlets </a>
</li>
<li class=" ">
<a href="portlet_ajax.html" class="nav-link "> Ajax Portlets </a>
</li>
<li class=" ">
<a href="portlet_draggable.html" class="nav-link "> Draggable Portlets </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-bar-chart"></i> Charts
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="charts_amcharts.html" class="nav-link "> amChart </a>
</li>
<li class=" ">
<a href="charts_flotcharts.html" class="nav-link "> Flot Charts </a>
</li>
<li class=" ">
<a href="charts_flowchart.html" class="nav-link "> Flow Charts </a>
</li>
<li class=" ">
<a href="charts_google.html" class="nav-link "> Google Charts </a>
</li>
<li class=" ">
<a href="charts_echarts.html" class="nav-link "> eCharts </a>
</li>
<li class=" ">
<a href="charts_morris.html" class="nav-link "> Morris Charts </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-dropdown classic-menu-dropdown ">
<a href="javascript:;">
<i class="icon-briefcase"></i> Pages
<span class="arrow"></span>
</a>
<ul class="dropdown-menu pull-left">
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-basket"></i> eCommerce
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="ecommerce_index.html" class="nav-link ">
<i class="icon-home"></i> Dashboard </a>
</li>
<li class=" ">
<a href="ecommerce_orders.html" class="nav-link ">
<i class="icon-basket"></i> Orders </a>
</li>
<li class=" ">
<a href="ecommerce_orders_view.html" class="nav-link ">
<i class="icon-tag"></i> Order View </a>
</li>
<li class=" ">
<a href="ecommerce_products.html" class="nav-link ">
<i class="icon-graph"></i> Products </a>
</li>
<li class=" ">
<a href="ecommerce_products_edit.html" class="nav-link ">
<i class="icon-graph"></i> Product Edit </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-docs"></i> Apps
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="app_todo.html" class="nav-link ">
<i class="icon-clock"></i> Todo 1 </a>
</li>
<li class=" ">
<a href="app_todo_2.html" class="nav-link ">
<i class="icon-check"></i> Todo 2 </a>
</li>
<li class=" ">
<a href="app_inbox.html" class="nav-link ">
<i class="icon-envelope"></i> Inbox </a>
</li>
<li class=" ">
<a href="app_calendar.html" class="nav-link ">
<i class="icon-calendar"></i> Calendar </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-user"></i> User
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="page_user_profile_1.html" class="nav-link ">
<i class="icon-user"></i> Profile 1 </a>
</li>
<li class=" ">
<a href="page_user_profile_1_account.html" class="nav-link ">
<i class="icon-user-female"></i> Profile 1 Account </a>
</li>
<li class=" ">
<a href="page_user_profile_1_help.html" class="nav-link ">
<i class="icon-user-following"></i> Profile 1 Help </a>
</li>
<li class=" ">
<a href="page_user_profile_2.html" class="nav-link ">
<i class="icon-users"></i> Profile 2 </a>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-notebook"></i> Login
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="">
<a href="page_user_login_1.html" class="nav-link " target="_blank"> Login Page 1 </a>
</li>
<li class="">
<a href="page_user_login_2.html" class="nav-link " target="_blank"> Login Page 2 </a>
</li>
<li class="">
<a href="page_user_login_3.html" class="nav-link " target="_blank"> Login Page 3 </a>
</li>
<li class="">
<a href="page_user_login_4.html" class="nav-link " target="_blank"> Login Page 4 </a>
</li>
<li class="">
<a href="page_user_login_5.html" class="nav-link " target="_blank"> Login Page 5 </a>
</li>
<li class="">
<a href="page_user_login_6.html" class="nav-link " target="_blank"> Login Page 6 </a>
</li>
</ul>
</li>
<li class=" ">
<a href="page_user_lock_1.html" class="nav-link " target="_blank">
<i class="icon-lock"></i> Lock Screen 1 </a>
</li>
<li class=" ">
<a href="page_user_lock_2.html" class="nav-link " target="_blank">
<i class="icon-lock-open"></i> Lock Screen 2 </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-social-dribbble"></i> General
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="page_general_about.html" class="nav-link ">
<i class="icon-info"></i> About </a>
</li>
<li class=" ">
<a href="page_general_contact.html" class="nav-link ">
<i class="icon-call-end"></i> Contact </a>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-notebook"></i> Portfolio
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="">
<a href="page_general_portfolio_1.html" class="nav-link "> Portfolio 1 </a>
</li>
<li class="">
<a href="page_general_portfolio_2.html" class="nav-link "> Portfolio 2 </a>
</li>
<li class="">
<a href="page_general_portfolio_3.html" class="nav-link "> Portfolio 3 </a>
</li>
<li class="">
<a href="page_general_portfolio_4.html" class="nav-link "> Portfolio 4 </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-magnifier"></i> Search
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class="">
<a href="page_general_search.html" class="nav-link "> Search 1 </a>
</li>
<li class="">
<a href="page_general_search_2.html" class="nav-link "> Search 2 </a>
</li>
<li class="">
<a href="page_general_search_3.html" class="nav-link "> Search 3 </a>
</li>
<li class="">
<a href="page_general_search_4.html" class="nav-link "> Search 4 </a>
</li>
<li class="">
<a href="page_general_search_5.html" class="nav-link "> Search 5 </a>
</li>
</ul>
</li>
<li class=" ">
<a href="page_general_pricing.html" class="nav-link ">
<i class="icon-tag"></i> Pricing </a>
</li>
<li class=" ">
<a href="page_general_faq.html" class="nav-link ">
<i class="icon-wrench"></i> FAQ </a>
</li>
<li class=" ">
<a href="page_general_blog.html" class="nav-link ">
<i class="icon-pencil"></i> Blog </a>
</li>
<li class=" ">
<a href="page_general_blog_post.html" class="nav-link ">
<i class="icon-note"></i> Blog Post </a>
</li>
<li class=" ">
<a href="page_general_invoice.html" class="nav-link ">
<i class="icon-envelope"></i> Invoice </a>
</li>
<li class=" ">
<a href="page_general_invoice_2.html" class="nav-link ">
<i class="icon-envelope"></i> Invoice 2 </a>
</li>
</ul>
</li>
<li class="dropdown-submenu ">
<a href="javascript:;" class="nav-link nav-toggle ">
<i class="icon-settings"></i> System
<span class="arrow"></span>
</a>
<ul class="dropdown-menu">
<li class=" ">
<a href="page_system_coming_soon.html" class="nav-link " target="_blank"> Coming Soon </a>
</li>
<li class=" ">
<a href="page_system_404_1.html" class="nav-link "> 404 Page 1 </a>
</li>
<li class=" ">
<a href="page_system_404_2.html" class="nav-link " target="_blank"> 404 Page 2 </a>
</li>
<li class=" ">
<a href="page_system_404_3.html" class="nav-link " target="_blank"> 404 Page 3 </a>
</li>
<li class=" ">
<a href="page_system_500_1.html" class="nav-link "> 500 Page 1 </a>
</li>
<li class=" ">
<a href="page_system_500_2.html" class="nav-link " target="_blank"> 500 Page 2 </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- END MEGA MENU -->
</div>
</div>

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری