basic version of the menu
This commit is contained in:
Edin Dazdarevic
@@ -16,7 +16,7 @@ var MenuItemListComponent = React.createClass({
|
||||
this.setState(MenuItemStore.getState());
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
getInitialState: function() {
|
||||
return MenuItemStore.getState();
|
||||
},
|
||||
@@ -41,12 +41,12 @@ var MenuItemListComponent = React.createClass({
|
||||
},
|
||||
//onCategoryClick: function(category, section) {
|
||||
//MenuItemActions.unsetSectionHover();
|
||||
//NavigationActions.goToCategory(new Category(category), section);
|
||||
//NavigationActions.goToCategory(new Category(category), section);
|
||||
//event.preventDefault();
|
||||
//},
|
||||
//onSubcategoryClick: function(subcategory) {
|
||||
//// implement in navigation actions
|
||||
//// and call
|
||||
//// and call
|
||||
//// when ready
|
||||
//return false;
|
||||
//},
|
||||
@@ -59,33 +59,125 @@ var MenuItemListComponent = React.createClass({
|
||||
position: 'absolute'
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="navbar navbar-default navbar-static-top">
|
||||
<div className="container">
|
||||
<ul className='nav nav-pills'>
|
||||
|
||||
<div className="navbar-collapse collapse ">
|
||||
<ul className="nav navbar-nav hidden-sm hidden-xs ">
|
||||
{/*
|
||||
<li id="myhome"><a href="home.html">Današnja ponuda</a></li>
|
||||
<li className="mydropdown menu-large">
|
||||
<a href="#" id="beba" className="dropdown-toggle "> Beba </a>
|
||||
<ul className="dropdown-menu megamenu row">
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
|
||||
<li><a href="kategorija.html">Majice</a></li>
|
||||
<li><a href="kategorija.html">Pantalone</a></li>
|
||||
<li><a href="kategorija.html">Trenerke</a></li>
|
||||
<li><a href="kategorija.html">Dukserice</a></li>
|
||||
<li><a href="kategorija.html">Skafanderi</a></li>
|
||||
<li><a href="kategorija.html">Kape</a></li>
|
||||
<li><a href="kategorija.html">Bodići</a></li>
|
||||
<li><a href="kategorija.html">Pidžame</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
|
||||
<li><a href="kategorija.html">Tekstil</a></li>
|
||||
<li><a href="kategorija.html">Namještaj</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
|
||||
<li><a href="kategorija.html">Sokovi</a></li>
|
||||
<li><a href="kategorija.html">Adaptirana mlijeka</a></li>
|
||||
<li><a href="kategorija.html">Kašice</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>*/}
|
||||
|
||||
{this.state.menuItems.map(function(menuItem) {
|
||||
return <li className="mydropdown menu-large">
|
||||
<a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
|
||||
<ul className="dropdown-menu megamenu row">
|
||||
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
|
||||
return (
|
||||
<li className="col-sm-3" key={menuSubItem.id}>
|
||||
|
||||
return (
|
||||
<li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}>
|
||||
<a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >
|
||||
{ menuItem.get('title') }
|
||||
|
||||
</a>
|
||||
<div style={abStyle} className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hide section-cat-list": "section-cat-list"} >
|
||||
|
||||
<ul >
|
||||
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
|
||||
return (
|
||||
<li key={menuSubItem.id}>
|
||||
<a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
|
||||
<li><a href="kategorija.html">Podkategorija 1</a></li>
|
||||
<li><a href="kategorija.html">Podkategorija 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
<ul className="nav navbar-nav hidden-lg hidden-md ">
|
||||
<li id="myhome"><a href="#">Današnja ponuda</a></li>
|
||||
<li className="dropdown menu-large">
|
||||
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Beba <b className="caret" /> </a>
|
||||
<ul className="dropdown-menu megamenu row">
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
|
||||
<li><a href="kategorija.html">Majice</a></li>
|
||||
<li><a href="kategorija.html">Pantalone</a></li>
|
||||
<li><a href="kategorija.html">Trenerke</a></li>
|
||||
<li><a href="kategorija.html">Dukserice</a></li>
|
||||
<li><a href="kategorija.html">Skafanderi</a></li>
|
||||
<li><a href="kategorija.html">Kape</a></li>
|
||||
<li><a href="kategorija.html">Bodići</a></li>
|
||||
<li><a href="kategorija.html">Pidžame</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
|
||||
<li><a href="kategorija.html">Tekstil</a></li>
|
||||
<li><a href="kategorija.html">Namještaj</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="col-sm-3">
|
||||
<ul>
|
||||
<li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
|
||||
<li><a href="kategorija.html">Sokovi</a></li>
|
||||
<li><a href="kategorija.html">Adaptirana mlijeka</a></li>
|
||||
<li><a href="kategorija.html">Kašice</a></li>
|
||||
<li><a href="kategorija.html">Ostalo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="kategorija.html">Dijete</a></li>
|
||||
<li><a href="kategorija.html">Mama</a></li>
|
||||
<li><a href="kategorija.html">Made in BiH</a></li>
|
||||
<li><a href="kategorija.html">Tržišna marka</a></li>
|
||||
{this.state.menuItems.map(function(menuItem) {
|
||||
return <li> <a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a></li>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user