Skip to content

Commit

Permalink
finished the submenu demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephanrauh
stephanrauh committed Jul 11, 2015
1 parent c956013 commit 7284987
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 155 deletions.
34 changes: 0 additions & 34 deletions MultiLevelDropDown/src/main/java/de/beyondjava/bootsfaces/examples/Person.java
View file

This file was deleted.

20 changes: 10 additions & 10 deletions MultiLevelDropDown/src/main/webapp/WEB-INF/web.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<context-param>
<param-name>javax.faces.FACELETS_DECORATORS</param-name>
<param-value>
de.beyondjava.angularFaces.core.tagTransformer.AngularTagDecorator
</param-value>
</context-param>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
<context-param>
<param-name>BootsFaces_USETHEME</param-name>
<param-value>true</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>index.jsf</welcome-file>
</welcome-file-list>
Expand Down
61 changes: 61 additions & 0 deletions MultiLevelDropDown/src/main/webapp/bf0.7.0.xhtml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui" xmlns:f="http://java.sun.com/jsf/core">

<h:head>
<style>
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {background-color:#ddd !important; }
</style>
<link type="text/css" rel="stylesheet" href="dropdown-submenu.css"></link>
</h:head>
<h:body>
<b:navBar brand="BootsFaces Rocks!" brandHref="/index.jsf" inverse="true"
fixed="true">
<b:navbarLinks>
<b:dropMenu value="Help"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff">
<b:navLink value="About"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff"
onclick="alert('This demo shows how to implement a multi-level drop-down menu.'); return false;"></b:navLink>
<b:dropMenu value="nested help menu"
styleClass="navbar-inverse dropdown-submenu" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff">
<b:navLink value="Nested About"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff"
onclick="alert('This demo shows how to implement a multi-level drop-down menu.'); return false;"></b:navLink>
</b:dropMenu>
</b:dropMenu>
</b:navbarLinks>
</b:navBar>

<b:container>
<p>The interesting part of this demo is the menu bar. It contains nested menus.</p>
<p>I've found the CSS source code at http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3. It's available under the <a target="#" href="http://bootsnipp.com/license">MIT license</a>.</p>
</b:container>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push([ 'trackPageView' ]);
_paq.push([ 'enableLinkTracking' ]);
(function() {
var u = "//www.atapuerca.de/piwik/";
_paq.push([ 'setTrackerUrl', u + 'piwik.php' ]);
_paq.push([ 'setSiteId', 4 ]);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript>
<p>
<img src="//www.atapuerca.de/piwik/piwik.php?idsite=4" style="border: 0;" alt="" />
</p>
</noscript>
<!-- End Piwik Code -->
</h:body>
</html>
48 changes: 48 additions & 0 deletions MultiLevelDropDown/src/main/webapp/dropdown-submenu.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@

.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
37 changes: 22 additions & 15 deletions MultiLevelDropDown/src/main/webapp/index.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,33 @@
<b:navLink value="About"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff"
onclick="alert('This demo shows how to implement a multi-level drop-down menu.')"></b:navLink>
onclick="alert('This demo shows how to implement a multi-level drop-down menu.'); return false;"></b:navLink>
<b:dropMenu value="nested help menu"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff">
<b:navLink value="Nested About"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#f00"
onclick="alert('You have clicked a level-3 menu item.'); return false;"></b:navLink>
<b:dropMenu value="level 4 menu"
styleClass="navbar-inverse" style="color:#00f"
contentClass="navbar-inverse" contentStyle="color:#fff">
<b:navLink value="About level 4"
styleClass="navbar-inverse" style="color:#fff"
contentClass="navbar-inverse" contentStyle="color:#fff"
onclick="alert('You have selected a menu nested four levels deep.'); return false;"></b:navLink>
</b:dropMenu>

</b:dropMenu>
</b:dropMenu>
</b:navbarLinks>
</b:navBar>

<b:container>
<b:tabView style="dd">
<b:tab title="large">
<div style="height: 10px" />
<ui:include src="large.xhtml" />
</b:tab>
<b:tab title="medium (default)">
<div style="height: 10px" />
<ui:include src="medium.xhtml" />
</b:tab>
<b:tab title="small">
<div style="height: 10px" />
<ui:include src="small.xhtml" />
</b:tab>
</b:tabView>
<p>The interesting part of this demo is the menu bar. It contains nested menus.</p>
<p>Nested submenus work out of the box in BootsFaces 0.8.0. If you are using the predecessor version BootsFaces 0.7.0,
see <a href="bf0.7.0.jsf">the BootsFaces 0.7.0 demo.</a></p>
<p>I've found the CSS source code at http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3. It's available under the <a target="#" href="http://bootsnipp.com/license">MIT license</a>.</p>
</b:container>
<!-- Piwik -->
<script type="text/javascript">
Expand Down
33 changes: 0 additions & 33 deletions MultiLevelDropDown/src/main/webapp/large.xhtml
View file

This file was deleted.

30 changes: 0 additions & 30 deletions MultiLevelDropDown/src/main/webapp/medium.xhtml
View file

This file was deleted.

33 changes: 0 additions & 33 deletions MultiLevelDropDown/src/main/webapp/small.xhtml
View file

This file was deleted.

0 comments on commit 7284987

Please sign in to comment.