Qt-dev/data.js

## data.js
var data = [
  {
    "text": "Link 1",
    "url": "#"
  },
  {
    "text": "Link 2",
    "url": "#"
  },
  {
    "text": "Link 3",
    "url": "#",
    "submenu": [
      {
        "text": "Sublink 1",
        "url": "#",
        "submenu": [
          {
            "text": "SubSublink 1",
            "url": "#"
          }
        ]
      },
      {
        "text": "Sublink 2",
        "url":"#",
        "submenu": [
          {
            "text": "SubSublink 2",
            "url": "#"
          }
        ]
      }
    ]
  }
]

## index.html
<html>
<head>
  <title></title>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>

  <script type="text/jsx" src="navbarLink.jsx"></script>
  <script type="text/jsx" src="navbarItem.jsx"></script>
  <script type="text/jsx" src="navbar.jsx"></script>

  <script type="text/javascript" src="data.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav></nav>
<script type="text/jsx">
  /** @jsx React.DOM */
  window.onload = React.renderComponent(
    <NavBar items={data} />,
    document.querySelector('nav')
  );
</script>
</body>
</html>

## navbar.jsx
/** @jsx React.DOM */
var NavBar = React.createClass({
  generateItem: function(item){
    return <NavBarItem text={item.text} url={item.url} submenu={item.submenu} />
  },
  render: function() {
    var items = this.props.items.map(this.generateItem);
    return (
      <ul className="menu">
      {items}
      </ul>
    );
  }
})

## navbarItem.jsx
/** @jsx React.DOM */
var NavBarItem = React.createClass({
  generateLink: function(){
    //Right now we don't need our class but what if we wanted to change the text, add an arrow or something?
    //Single responsibility principles tell us that it our "Item" should not handle this.
    return <NavBarLink url={this.props.url} text={this.props.text} />;
  },
  generateSubmenu: function(){
    //We generate a simple Navbar (the parent).
    //Spoilers: it takes items as its argument.
    return <NavBar items={this.props.submenu} />
  },
  generateContent: function(){
    var content = [this.generateLink()];
    if(this.props.submenu){
      //If there is a submenu in our data for this item
      //We add a generated Submenu to our content
      content.push(this.generateSubmenu());
    }
    return content;
  },
  render: function() {
    var content = this.generateContent();
    return (
      <li>
        {content}
      </li>
    );
  }
})

## navbarLink.jsx
/** @jsx React.DOM */
var NavBarLink = React.createClass({
  render: function() {
    return (
      <a href={this.props.url}>{this.props.text}</a>
    );
  }
})

## style.css
.menu {
  list-style: none;
  /* Important for sizing problems when you add/remove the submenus
     Make it use 100% of the size of your container */
  width: 100%;
  /* This prevents a lot of problems with the submenus.
     UL have basic padding, keep that in mind */
  padding: 0;
}

.menu li {
  /* I wanted mine horizontal. Feel free to change it to what you want */
  display:inline-block;
  /* Float the items to the left, to make sure the disposition does not change when it shows the subitems */
  float:left;
  /* The -1px on top and right make it so that our borders end up above one another
     Not needed it you don't have borders... */
  margin:-1px -1px 0 0;
}

.menu li a {
  display:block;


  /* My basic styling. I'm just giving them a black text, with a black border, and center the text in the box. */
  text-decoration:none;
  border: 1px solid black;
  vertical-align: middle;
  text-align: center;

  /* Fixed size is also just me.
     Not fixing it just make huge boxes when you have submenus */
  width:100px;
  height:50px;
  line-height: 50px;
}

.menu li > ul {
/****** THE INTERESTING PART ******/
/* We hide the submenus by putting them somewhere on the left, with no opacity. */
  left:-9999px;
  opacity: 0;

/* We make transitions on opacity */
  -webkit-transiton: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.menu li:hover > ul {
/* On hover, we get it back to its basic spot
  left:0;
/* And change the opacity to a fully visible one */
  opacity: 1;
};
	var data = [
	{
	"text": "Link 1",
	"url": "#"
	},
	{
	"text": "Link 2",
	"url": "#"
	},
	{
	"text": "Link 3",
	"url": "#",
	"submenu": [
	{
	"text": "Sublink 1",
	"url": "#",
	"submenu": [
	{
	"text": "SubSublink 1",
	"url": "#"
	}
	]
	},
	{
	"text": "Sublink 2",
	"url":"#",
	"submenu": [
	{
	"text": "SubSublink 2",
	"url": "#"
	}
	]
	}
	]
	}
	]
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/JSXTransformer.js"></script>

	<script type="text/jsx" src="navbarLink.jsx"></script>
	<script type="text/jsx" src="navbarItem.jsx"></script>
	<script type="text/jsx" src="navbar.jsx"></script>

	<script type="text/javascript" src="data.js"></script>

	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<nav></nav>
	<script type="text/jsx">
	/** @jsx React.DOM */
	window.onload = React.renderComponent(
	<NavBar items={data} />,
	document.querySelector('nav')
	);
	</script>
	</body>
	</html>
	/** @jsx React.DOM */
	var NavBar = React.createClass({
	generateItem: function(item){
	return <NavBarItem text={item.text} url={item.url} submenu={item.submenu} />
	},
	render: function() {
	var items = this.props.items.map(this.generateItem);
	return (
	<ul className="menu">
	{items}
	</ul>
	);
	}
	})
	/** @jsx React.DOM */
	var NavBarItem = React.createClass({
	generateLink: function(){
	//Right now we don't need our class but what if we wanted to change the text, add an arrow or something?
	//Single responsibility principles tell us that it our "Item" should not handle this.
	return <NavBarLink url={this.props.url} text={this.props.text} />;
	},
	generateSubmenu: function(){
	//We generate a simple Navbar (the parent).
	//Spoilers: it takes items as its argument.
	return <NavBar items={this.props.submenu} />
	},
	generateContent: function(){
	var content = [this.generateLink()];
	if(this.props.submenu){
	//If there is a submenu in our data for this item
	//We add a generated Submenu to our content
	content.push(this.generateSubmenu());
	}
	return content;
	},
	render: function() {
	var content = this.generateContent();
	return (
	<li>
	{content}
	</li>
	);
	}
	})
	/** @jsx React.DOM */
	var NavBarLink = React.createClass({
	render: function() {
	return (
	<a href={this.props.url}>{this.props.text}</a>
	);
	}
	})
	.menu {
	list-style: none;
	/* Important for sizing problems when you add/remove the submenus
	Make it use 100% of the size of your container */
	width: 100%;
	/* This prevents a lot of problems with the submenus.
	UL have basic padding, keep that in mind */
	padding: 0;
	}

	.menu li {
	/* I wanted mine horizontal. Feel free to change it to what you want */
	display:inline-block;
	/* Float the items to the left, to make sure the disposition does not change when it shows the subitems */
	float:left;
	/* The -1px on top and right make it so that our borders end up above one another
	Not needed it you don't have borders... */
	margin:-1px -1px 0 0;
	}

	.menu li a {
	display:block;


	/* My basic styling. I'm just giving them a black text, with a black border, and center the text in the box. */
	text-decoration:none;
	border: 1px solid black;
	vertical-align: middle;
	text-align: center;

	/* Fixed size is also just me.
	Not fixing it just make huge boxes when you have submenus */
	width:100px;
	height:50px;
	line-height: 50px;
	}

	.menu li > ul {
	/**** THE INTERESTING PART ****/
	/* We hide the submenus by putting them somewhere on the left, with no opacity. */
	left:-9999px;
	opacity: 0;

	/* We make transitions on opacity */
	-webkit-transiton: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
	}

	.menu li:hover > ul {
	/* On hover, we get it back to its basic spot
	left:0;
	/* And change the opacity to a fully visible one */
	opacity: 1;
	};