basicly magento generate menu html:
<ul id="nav">
<li class="level0 nav-1 first level-top">
<span>Home</span>
</li>
<li class="level0 nav-1 first level-top parent">
<span>Category</span>
<ul class="level0">
<li class="level1 nav-2-1 first">
<span>Sub Category</span>
</li>
<li class="level1 nav-2-1">
<span>Sub Category</span>
</li>
<li class="level1 nav-2-1 last">
<span>Sub Category</span>
</li>
</ul>
</li>
</ul>
now, i want custom change output html menu (add more class html, add more element html...) somebody can help me?
There's different tutorials for doing this, but here's what I did:
Save /app/code/frontend/design/default/default/template/page/html/topmenu.phtml to /app/code/frontend/design/yourpackagename/yourthemename/template/page/html/topmenu.phtml and edit as follows:
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<ul id="nav">
<li class="level0 nav-1 first level-top"><a href="/" class="level-top" ><span>Home</span></a></li>
<?php echo $_menu ?>
</ul>
</div>
<?php endif ?>
To get yourpackagename and yourthemename, use System - Configuration - Design
hth, sconnie
Related
I want add schema in my Joomla menu...! Below is code
<?php
$menu = JFactory::getApplication()->getMenu();
// Get menu items - array with menu items
$items = $menu->getItems('menutype', 'mainmenu');
//print_r($items);
?>
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<?php foreach($items as $i => $menu_item){
?>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/"><?php if($menu_item->level == '1') { echo $menu_item->title; } ?></a>
<?php if($menu_item->level == '2') {?>
<ul>
<li><?php echo $menu_item->title; ?></li>
</ul><?php } ?>
</li>
<?php } ?>
</ul>
problem I am facing is, above not printing sub-menu I could not find any solution
For Example :
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">Home</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">DIFC</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">ADGM</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">About</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">Publications</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">FinTech: Now Everybody Wants A Slice of the Pie</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">The Role of Financial Centres in Emerging Economies</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">Bitcoin versus Ethereum </a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">ADGM</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">DIFC</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">Finance</a>
</li>
<li itemprop="name"><a itemprop="url" href="http://www.10leaves.ae/">Contact</a>
</li>
</ul>
Publication Menu has submenu (FinTech) and two more. I cannot figure it out how to make them print in Submenu
Could you not try this Extension from Tassos Marinos
Dave
I have a application with extends a view with name "notification". How you can see in the picture.
That fragment is just a list, don't extends anything, How I pass a variable to that list? Something fixed. Any suggestion?
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="bell" data-loop="true" data-color="#e9573f"
data-hovercolor="#e9573f" data-size="28"></i>
<span class="label label-warning">7</span>
</a>
<ul class=" notifications dropdown-menu drop_notify">
<li class="dropdown-title">Você tem novas notificações</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
#foreach($notificacao as $value)
<li>
<i class="livicon default" data-n="asterisk" data-s="20" data-c="white"
data-hc="white"></i>
Você tem novas perguntas
<small class="pull-right">
<span class="livicon paddingright_10" data-n="timer" data-s="10"></span>
{{$value->created_at->diffForHumans()}}
</small>
</li>
#endforeach
</ul>
</li>
<li class="footer">
View all
</li>
</ul>
</li>
I am currently making a template in Joomla using Materialize CSS as the framework. I get stuck with the part where I make a dropdown menu in Joomla. The HTML should go as followed (as explained on the documentation page of Materialize)
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
</li>
My index.php goes as follows:
<!-- Start Navbar -->
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.php" class="brand-logo">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<ul class="right hide-on-med-and-down">
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<i class="mdi mdi-menu"></i>
</div><!-- /nav-wrapper container -->
</nav>
<!-- End Navbar -->
The problem is that I use the menu module twice because of the mobile menu. An ID tag can only be used once so the dropdown doesn't work.
Does anyone know how I can fix this?
Its not a good idea to have the same module position duplicated in the template multiple times as it will render the same markup every time.
Instead, the best approach is to create a copy of the menu module and publish it to your mobile menu position.
In Joomla Admin, duplicate the current menu module
Publish the duplicated menu module to a new position e.g. "mobile-nav". All other settings for this duplicated module can be identical to the original (desktop) menu module.
Update your template code to include position for "mobile-nav" where the mobile navigation should be displayed.
Update template code for new module position (just swap out position-1 with mobile-nav):
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="mobile-nav" style="none" />
</ul>
I have this code in template to make a static home button. On the home button on hover over I would like to have a blog button underneath.
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<div class="container_24">
<div class="grid_24">
<div id="menu-icon">Categories</div>
<ul id="nav" class="sf-menu">
<li class="level0 level-top<?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()) echo ' active'; ?>">
<a class="level-top" href="<?php echo $this->getUrl('')?>">
<span>Home</span>
</a>
</li>
<?php echo $_menu ?>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<?php endif ?>
I have the following in my header:
<div id="wrapper" class="homepage itemlist com_k2 category">
<div id="rt-header">
<div class="rt-container">
<div class="rt-grid-3 rt-alpha">
<div class="rt-block"></div>
</div>
<div class="rt-grid-9 rt-omega">
<div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
<ul class="menutop level1 ">
<li class="parent root f-main-parent firstItem f-mainparent-item"> <a class="daddy item bullet" href="www.domain.com"> <span> الرئيسية </span> </a> </li>
<li class="active root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Now if you investigate the elements, you will find that there is an active flag in one of them. This makes sure that the currently seen page is highlighted in navigation bar. I want to know how can I change this based on view loaded? this is how I load views:
$this->load->view('layout/header');
$this->load->view('home');
$this->load->view('layout/footer');
So in this case the main navigation tab should be active.
Regards,
I completed something similar recently. Probably not the best way, but it works for me.
In your controller add this before your views
$data['contact'] = 'active';
Then pass the $data variable from the controller to the view
$this->load->view('header', $data);
And in your view add this to the list item
<li class="contact <?php if(isset($contact)) {echo $contact; }">
from the controller:
set names for your menus and put the loaded menu or page name in a variable as the following:
$data['active'] = 'menu1';
$this->load->view('layout/header',$data);
$this->load->view('home');
$this->load->view('layout/footer');
in the view:
<div id="wrapper" class="homepage itemlist com_k2 category">
<div id="rt-header">
<div class="rt-container">
<div class="rt-grid-3 rt-alpha">
<div class="rt-block"></div>
</div>
<div class="rt-grid-9 rt-omega">
<div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
<ul class="menutop level1 ">
<li class="<?php if(isset($active) && $active == 'menu1') echo 'active'; ?> parent root f-main-parent firstItem f-mainparent-item"> <a class="daddy item bullet" href="www.domain.com"> <span> الرئيسية </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu2') echo 'active'; ?> root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu3') echo 'active'; ?> root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="<?php if(isset($active) && $active == 'menu4') echo 'active'; ?> root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Give each menu item a distinct class or id then do it via jQuery or js
<li class="kitchen root"> <a class="orphan item bullet" href="load_kitchen_list"> <span> المطبخ </span> </a> </li>
<li class="anotherclass root"> <a class="orphan item bullet" href=""> <span style="font-size:medium;"> الملف الشخصي </span> </a> </li>
<li class="contact root"> <a class="orphan item bullet" href="main/contactus"> <span> للإتصال بنا</span> </a> </li>
Then for example in the contact page you'd simply do this via jQuery:
$(document).ready(function(){
$(".contact").addClass("active");
});