Sprite Nav Wizard

@media screen and (max-width: {{ max }}px) {

span.{{ Span }} a:link, span.{{ Span }} a:visited{
height:{{ height }}px;
width:{{ width }}px;
display:block;
text-indent:-9999px;
//float:left;
position:absolute;
}

#{{ Span }}NAV{
position:relative;
}
a:active{-moz-outline-style:none;outline: none;}
a:focus{-moz-outline-style:none;outline: none;}

span.{{ Span }}00 a:link,a:visited{background:url({{ imageurl }})0 0;opacity: 1.0;}
span.{{ Span }}01 a:link,a:visited{background:url({{ imageurl }}) -{{ width }}px 0;opacity: 1.0;}
span.{{ Span }}02 a:link,a:visited{background:url({{ imageurl }}) -{{ width*2 }}px 0;opacity: 1.0;}
span.{{ Span }}03 a:link,a:visited{background:url({{ imageurl }}) -{{ width*3 }}px 0;opacity: 1.0;}
span.{{ Span }}04 a:link,a:visited{background:url({{ imageurl }}) -{{ width*4 }}px 0;opacity: 1.0;}
span.{{ Span }}05 a:link,a:visited{background:url({{ imageurl }}) -{{ width*5 }}px 0;opacity: 1.0;}
span.{{ Span }}06 a:link,a:visited{background:url({{ imageurl }}) -{{ width*6 }}px 0;opacity: 1.0;}
span.{{ Span }}07 a:link,a:visited{background:url({{ imageurl }}) -{{ width*7 }}px 0;opacity: 1.0;}
span.{{ Span }}08 a:link,a:visited{background:url({{ imageurl }}) -{{ width*8 }}px 0;opacity: 1.0;}
span.{{ Span }}09 a:link,a:visited{background:url({{ imageurl }}) -{{ width*9 }}px 0;opacity: 1.0;}

span.{{ Span }}00 a:hover{background:url({{ imageurl }}) 0px -{{ height }}px;opacity: 1.0;}
span.{{ Span }}01 a:hover{background:url({{ imageurl }}) -{{ width*1 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}02 a:hover{background:url({{ imageurl }}) -{{ width*2 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}03 a:hover{background:url({{ imageurl }}) -{{ width*3 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}04 a:hover{background:url({{ imageurl }}) -{{ width*4 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}05 a:hover{background:url({{ imageurl }}) -{{ width*5 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}06 a:hover{background:url({{ imageurl }}) -{{ width*6 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}07 a:hover{background:url({{ imageurl }}) -{{ width*7 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}08 a:hover{background:url({{ imageurl }}) -{{ width*8 }}px -{{ height*1 }}px;opacity: 1.0;}
span.{{ Span }}09 a:hover{background:url({{ imageurl }}) -{{ width*9 }}px -{{ height*1 }}px;opacity: 1.0;}

span.{{ Span }}00 a:active{background:url({{ imageurl }}) 0px -{{ height*2 }}px}
span.{{ Span }}01 a:active{background:url({{ imageurl }}) -{{ width*1 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}02 a:active{background:url({{ imageurl }}) -{{ width*2 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}03 a:active{background:url({{ imageurl }}) -{{ width*3 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}04 a:active{background:url({{ imageurl }}) -{{ width*4 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}05 a:active{background:url({{ imageurl }}) -{{ width*5 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}06 a:active{background:url({{ imageurl }}) -{{ width*6 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}07 a:active{background:url({{ imageurl }}) -{{ width*7 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}08 a:active{background:url({{ imageurl }}) -{{ width*8 }}px -{{ height*2 }}px;opacity: 1.0;}
span.{{ Span }}09 a:active{background:url({{ imageurl }}) -{{ width*9 }}px -{{ height*2 }}px;opacity: 1.0;}

}

span.{{ Span }}00{position:absolute;left:0px;top:0px;opacity: 1.0;}
span.{{ Span }}01{position:absolute;left:{{ width*1 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}02{position:absolute;left:{{ width*2 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}03{position:absolute;left:{{ width*3 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}04{position:absolute;left:{{ width*4 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}05{position:absolute;left:{{ width*5 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}06{position:absolute;left:{{ width*6 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}07{position:absolute;left:{{ width*7 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}08{position:absolute;left:{{ width*8 }}px;top:0px;opacity: 1.0;}
span.{{ Span }}09{position:absolute;left:{{ width*9 }}px;top:0px;opacity: 1.0;}

</div>

Bootstrap modals

Put this in the HEAD

⧪

Replace The Buttons With This

⧪

Put This At The Bottom Of The Page

⧪

<div class="modal fade" id="{{ Span }}00" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}00">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}00</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}00.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}01" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}01">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}01</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}01.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}02" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}02">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}02</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}02.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}03" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}03">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}03</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}03.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}04" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}04">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}04</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}04.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}05" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}05">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}05</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}05.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}06" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}06">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}06</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}06.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}07" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}07">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}07</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}07.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}08" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}08">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}08</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}08.</p>
</div>
</div>
</div>
</div>

<div class="modal fade" id="{{ Span }}09" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header {{ Span }}09">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for {{ Span }}09</h4>
</div>
<div class="modal-body">
<p>This is the Content for {{ Span }}09.</p>
</div>
</div>
</div>
</div>

Style For The Pop Up

⧪

In Case You Want A Different Color Per "Title"

⧪

⧪

⧪

⧪

⧪

⧪

⧪