senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic version of the menu

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-04-13 23:16:33 +02:00
parent 96420fc547
commit 452a2cd5f4
1 changed files with 117 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
front-ui/app/components/shared/menuItemListComponent.js
View File

@@ -59,33 +59,125 @@ var MenuItemListComponent = React.createClass({
position: 'absolute' position: 'absolute'
}; };
return ( return (
<div> <div className="navbar navbar-default navbar-static-top">
<div className="container">
<ul className='nav nav-pills'> <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) { {this.state.menuItems.map(function(menuItem) {
return <li className="mydropdown menu-large">
return ( <a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
<li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}> <ul className="dropdown-menu megamenu row">
<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) { {menuItem.get('menu_sub_items').map(function(menuSubItem) {
return ( return (
<li key={menuSubItem.id}> <li className="col-sm-3" key={menuSubItem.id}>
<a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
<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> </li>
) )
})} })}
</ul> </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> </div>
</li>
)
})}
</ul> </ul>
</div> </div>
</div>
); );
} }
}); });