大型百人牛牛游戏下载大全

書名： Mastering Magento Theme Design
作者名： Andrea Saccà
本章字數： 310字
更新時間： 2021-07-16 11:57:27

Creating the navigation bar

For the navigation bar, we can use the <nav> tag to wrap it up and make it responsive and ready with some tricks. Bootstrap helps us with the navigation component that we can integrate with a little help from jQuery.

In the header.phtml file, the navigation block looks as follows:

<!-- Navigation -->
<nav class="navbar navbar-default navbar-main" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand visible-xs" href="#">
<?php echo $this->__('Categories') ?>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only"><?php echo $this->__('Toggle Navigation') ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-main-collapse">
<?php echo $this->getChildHtml('topMenu') ?>
 <?php echo $this->getChildHtml('topSearch') ?>
</div>
</div>
</div>
</nav>

The top menu bar

The topmenu.phtml file is the navigation file that you can copy from app/design/frontend/base/default/template/page/html/.

The final code of this file is as follows:

<?php $_menu = $this->getHtml('level-top') ?>
<?php if ($_menu): ?>
<ul class="nav navbar-nav">
<li><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>">Home</a></li>
<?php echo $_menu ?>
</ul>
<?php endif ?>

Unfortunately, the Bootstrap menu has some classes that we cannot add in this file. To solve this problem, we can add the Bootstrap classes with some jQuery scripts.

So open the jquery.scripts.js file that you created before and add the following code just after jQuery(document).ready(function() {:

jQuery('.navbar .parent').addClass('dropdown');
jQuery('.navbar a.level-top').addClass('dropdown-toggle');
jQuery('.navbar li.parent ul').addClass('dropdown-menu');
jQuery('.navbar li.level1 ul').wrap('<li class="dropdown-submenu" />');
jQuery('.navbar ul.nav li.level0.dropdown').hover(function() {
jQuery(this).find('.level0.dropdown-menu').stop(true, true).fadeIn();
}, function() {
jQuery(this).find('.level0.dropdown-menu').stop(true, true).fadeOut();
});

Now add the following CSS code to hide the submenu that will be displayed only on the mousehover event with the jQuery described before:

/* Navbar */
.navbar {
  border:0 none;
  border-radius:0;
  margin:0;
  border-bottom:3px solid #E7E7E7;
}
.navbar .navbar-form {
  padding-right:10px;
}
.navbar-nav {
}
.navbar-default .navbar-nav > li:hover > a {
 background:#fff;
 box-shadow:0 6px 12px rgba(0,0,0,0.176);
}
.navbar ul.level0,.navbar ul.level1 {
  display:none;
  text-align:left;
}
.navbar .dropdown-menu {
border:0;
}
.navbar ul.level1 {
 left:150px;
 top:0;
}
.navbar-nav > li {
display:inline-block;
}

Search

The search file form.mini.phtml is the one you can copy from app/design/frontend/base/default/template/catalogsearch/.

As usual, we will change the code with the Bootstrap class and the final code will be as follows:

<?php $catalogSearchHelper =  $this->helper('catalogsearch'); ?>
<form id="search_mini_form" class="navbar-form navbar-right" role="search" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><div class="glyphicon glyphicon-search pull-left"></div></span>
<input id="search" type="text"  name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="form-control" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->__('Search...') ?>" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Submit</button>
</span>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div></form>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search...') ?>');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');//]]>
</script>

The header is now completed and we can now proceed to develop the footer.

官术网_书友最值得收藏!

Mastering Magento Theme Design

Creating the navigation bar

The top menu bar

Search