Follow

Navigation Bar - Menu Bar - HTML Element - IBv3.0

Navigation Bar - Menu Bar - HTML Element - IBv3.0

bulb_dim.png  Please Note:  IBv3.0 allows users to add HTML Elements to IBv3.0 pages.  The below example is a basic introduction for demonstration purposes only.  More advanced HTML, CSS and scripting language techniques are outside the of scope of the Help Desk support parameters. 

bulb_dim.png  Please note:  before you can add any element to a page you must first have row(s) and column(s) setup in Layout Mode

In this example, the campaign page was created via Option 2: Create a Custom Page  for instructional clarity.

 1.  If needed, switch your mode to Content Mode as elements can not  be added to a page in Layout Mode

2014-07-11_1434.png 

2. Click the HTML element from the element list on the left hand side of the screen.  

2014-07-14_1016.png 

3.  Now drag the HTML element  and drop it into a column container 

2014-07-11_1442.png 

4.  The New HTML element is displayed on the Content Mode screen. 

5.  To edit the New HTML element:

2014-07-14_1019.png 

  • Hover over the New HTML element.
  • Click the blue Edit icon.
  • The corresponding element Edit screen will appear. 

Navigation Bar Example

  • A navigation bar is basically a list of links.
  • The HTML code for a link looks like   <a href="url">Link text</a>
  • The href attribute specifies the destination of a link (This can be internal to an IC campaign (s) or external to another web page)
  • URLs for IC campaign Pages can be found on the campaign dashboard or in the Page URL field at the top of the builder screen.

2014-08-05_1129.png 

2014-08-05_1132.png   

Basic Example

Input HTML: 

<nav>
<li><a href="http://www.theurlgoeshere.html">Home</a></li>
<li><a href="http://www.theurlgoeshere.html">News</a></li>
<li><a href="http://www.theurlgoeshere.html">Contact</a></li>
<li><a href="http://www.theurlgoeshere.html">About</a></li>
</nav>

 2014-08-05_1137.png 

Renders: 

2014-08-05_1139.png 

Example with Style Elements

Input HTML:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: #7A991A;
}
</style>

<nav>
<li><a href="http://www.theurlgoeshere.html">Home</a></li>
<li><a href="http://www.theurlgoeshere.html">News</a></li>
<li><a href="http://www.theurlgoeshere.html">Contact</a></li>
<li><a href="http://www.theurlgoeshere.html">About</a></li>
</nav> 

2014-08-05_1144.png 

Renders:

2014-08-05_1143.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk