SharePoint Navigation Tools
SharePoint 2013 Preview
Download SharePoint Navigation Tools
Customization with HTML Templates
HTML templates can be used in combination with views of lists and document libraries. Read more about Customization with Views. The templating feature is activated if your view contains a field with the name Template. This field can be of type multiple lines of text or lookup. A field of type text contains the content of the template. A field of type lookup references a list item in another list with a field Template with the content.
Default HTML Template
This is the default HTML template of a node. I.e. this template will render the same HTML code without a template in use if your view contains fields with the names Title and Description.
1
2
3
4
5
6
<ins class="mxnav-icon">&nbsp;</ins>
<div class="ms-navitem">
    <a class="ms-navitem" href="-LinkFilename-" title="-Description-">
        <ins class="mxnav-icon -IconClass-" style="background-image: url(-IconURL-);">&nbsp;</ins><span>-Title-</span>
    </a>
</div>
Tokens in Templates
Templates can contain tokens of the fields of the view in the form -<Field Name>- and special tokens:
  • -ItemURL- The URL of the item
  • -IconURL- The URL of the icon image
  • -IconClass- The CSS class name of the icon
Sample Template
This sample template creates rich HTML content driven from a list for nodes in a drop down menu web part. The list contains the fields Title (text), Testfeld (rich text) and Description (text). It show two items with different templates.
Template code of item one of this sample (above the image):
1
2
3
4
5
6
7
8
<div style="clear: both; display: block; margin-bottom: 15px;">
    <a href="-ItemURL-" style="height: auto !important; font-size: 36px; font-family: Arial;">
        <div style="white-space: normal; width: 600px; display: block;">-Title-</div>
    </a>
    <div style="clear: both; padding-top: 5px; display: block;">
        <a href="#" style="display: block; white-space: normal; height: auto !important;">-Description-</a>
    </div>
</div>
Template code of item two of this sample (the image and below):
1
2
3
4
5
6
7
8
<div style="clear: both; display: block;">
    <a href="-ItemURL-" style="height: auto !important;">
        <div style="white-space: normal; width: 600px; display: block;">-Testfeld-</div>
    </a>
    <div style="clear: both; padding-top: 15px; display: block;">
        <a href="#" style="display: block; white-space: normal; height: auto !important;">-Description-</a>
    </div>
</div>
Custom CSS in the configuration of the web part of this sample:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.modulerixNodes { white-space: normal; }
 
.modulerixNavM { position: static; float: left; }
.modulerixNavM .modulerixNodes { z-index: 70; margin-right: 12px; }
 
.modulerixNavM, .modulerixNavM a { color: #ffffff !important; }
.modulerixNavM a { padding-left: 5px; padding-right: 5px; font-size: 12px; font-family: "Segoe UI", Arial; }
 
.modulerixNavM .modulerixNodes { border: 0 !important; margin-left: 0; }
.modulerixNavM .modulerixNodes > li > div { background-image: none; }
 
.modulerixNavM li > ins { border-left: solid 0px #80a0d0 !important; }
.modulerixNavM > ul > li { border-right: solid 1px #304050; }
.modulerixNavM ins { background-image:url("/_layouts/modulerix/MenuIcons2.png"); background-repeat:no-repeat; background-color:transparent; }
.modulerixNavM .jstree-hovered > div { background-position: -300px -50px; }
 
.modulerixNavM li .modulerixNodes { padding: 25px; background-color: #495f84; border-radius: 15px; }
.modulerixNavM > .modulerixNodes > li > ul { border-top-left-radius: 0px; }
.modulerixNavM li > .modulerixNodes > li > ul {top: -15px !important; }
.modulerixNavM li > .modulerixNodes > li > ins {width: 36px !important; }
 
.modulerixNavM > ul > li > div { background-image: none; border: 0 !important; }
.modulerixNavM > ul > li > ins { border: 0 !important; }
.modulerixNavM > ul > li > div { background-image: none !important; }
.modulerixNavM > ul > li.jstree-childvisible > div { background-image: url(/_layouts/modulerix/Menu1_03.gif) !important; background-position: 0 0; }
.modulerixNavM  a { color: #e0e8ff !important; }
.modulerixNavM > ul > li > div > a { margin-left: 10px !important; margin-right: 8px !important; padding-top: 1px !important; padding-bottom: 3px !important; height: 39px; font-size: 20px !important; letter-spacing: 1px; font-family: "Yanone Kaffeesatz", Arial; color: #d0d8f0 !important; }
.modulerixNavM > ul > li > div > a > .jstree-icon { margin-top: 8px !important; }
.modulerixNavM a:hover { color: #ffffff !important; }
.modulerixNavM li.jstree-childvisible > div > a  { color: #ffffff !important; }
.modulerixNavM > ul > li > div > a > .jstree-checkbox { margin-top: 7px; }
 
.modulerixNavM  .modulerixNodes > li > div > a > span { padding-right: 20px; }
.modulerixNavM  > ul > li > div > a > span { padding-right: 16px; }
.modulerixNavM > ul > li.jstree-open > ins { background-position:-117px 4px; }
.modulerixNavM > ul > li.jstree-closed > ins { background-position:-41px 4px; }
.modulerixNavM > ul > li > .jstree-loading { background-position: -2px 10px !important; }
.modulerixNavM > ul > li > ul { border-top: 0; margin-top: 0px; }
0 CommentsWrite a Comment
SharePoint Solutions
by getYourNet IT Services

Navigation Tools

Products

Support

Copyright 2015 getYourNet IT Services