EverWeb Widgets

Responsive Code Widget

Using the EverWeb HTML Snippet widget along with the Head and Footer Code boxes is OK for little bits and pieces but the boxes are far too small for more serious stuff and there's no easy way to add external CSS and Javascript files.
The responsive code widget is for those who need to insert more elaborate items which require a little more than just basic HTML and CSS.
The widget has the following controls from top to bottom …

  • A large HTML box which is 1000px in height
  • A field for inserting meta data
  • A link to download and insert Font Awesome icons and a field to specify the version number
  • A link to Google Fonts and a field for inserting the font family name
  • A checkbox for inserting a maximum width and a field to enter the width in pixels
  • Two checkboxes and Choose buttons to insert external stylesheets that have been dragged into the Assets List
  • A large 800px in height box for inserting custom styles without having to use style tags
  • Two checkboxes and Choose buttons to insert external Javascript files that have been dragged into the Assets List
  • A box for inserting any other code into the head of the HTML doc
  • A box for inserting any other code immediately before the closing body tag such as JS and analytics code

Code Insertion

The item below is a responsive navigation which shows the current page and has a hover underlne animation when viewed on computers
If it is necessary to display code on a web page, it needs to be converted so that it is compatible with a text box. Click the link below to open the Code Convertor.

Convert Code

HTML

<div class="navWrap">
<nav class="hoverUL">
<a href="#"><span>Link [1]</span></a>
<a href="#"><span class="active">Current</span></a>
<a href="#"><span>Link [2]</span></a>
<a href="#"><span>Link [2]</span></a>
<a href="#"><span>Link [2]</span></a>
<a href="#"><span>Link [2]</span></a>
</nav>
</div>

CSS

.navWrap{position:relative;margin:0;padding:10px 10px;background:#000}

.navWrap .hoverUL{display:block;width:100%;max-width:1200px;margin:0 auto;text-align:center;padding:0}

.navWrap .hoverUL a{text-decoration:none;display:inline-block;font:16px Verdana, sans-serif;text-transform:uppercase;text-align:center;color:#FFF;min-width:100px;margin:2px 2px;padding:5px;background:#555;border-radius:0px}

.navWrap .hoverUL span{display:inline-block;position:relative;margin:0 calc(5px / 2);padding:7px 10px;transition:color 0.5s ease;-webkit-transition:color 0.5s ease}

.navWrap .hoverUL a:hover{color:#00FF00}

.navWrap .hoverUL span::after{content:"";display:block;position:absolute;bottom:calc(10px - 7px);left:50%;height:2px;width:0;background:transparent;transition:width 0.5s ease, background-color 0.5s ease, left 0.5s ease;-webkit-transition:width 0.5s ease, background-color 0.5s ease, left 0.5s ease}

.navWrap .hoverUL a:hover span::after{width:calc(100% - 2 * 10px);left:10px;background:#00FF00}

.navWrap .hoverUL span.active{color:#FFFF00}

.navWrap .hoverUL a:hover span.active::after{background:#FFFF00}

.navWrap .hoverUL span.active::after{content:"";display:block;position:absolute;bottom:calc(7px - 7px);background:#FFFF00}

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

.navWrap{padding:10px 0}/* v space */

.navWrap .hoverUL a{text-align:left;display:block;margin:2px 5px}

.navWrap .hoverUL a:hover:after{width:0}

.navWrap .hoverUL span.active::after{display:none}

}

© EverWeb Widgets -