KFox Portfolio - HTML & CSS

Back to Pattern Library Homepage

Pattern Library: Navigation

Main Page Header

Every page has a <header> containing a <div> with branding information, and an <h1> containing an <a> link to the ButlerCC Webhosting homepage.

ButlerCC Webhosting

Free Webhosting for ButlerCC WebDev Students

Usage:

This element is at the top of every page, keeping the branding consistent and providing a link back to the site's homepage.

Markup


            <header class="butlerWebDev__pageHeader clearfix">
                <div class="butlerWebDev__pageHeaderBranding">
                    <h1 class="butlerWebDev__h1">
                        <a href="https://butlerccwebdev.net/index.php"
                            class="butlerWebDev__link butlerWebDev__pageHeaderLink">
                            ButlerCC Webhosting
                        </a>
                    </h1>
                </div>
            </header>

Breadcrumb Links

Currently, all pages use breadcrumb links instead of a navigation bar. They consist of a <p> containing <a> links. These links are placed at the top of the <main> element, but before any <article> elements or other content.

Home > Tutorials and Resources > Name of the current page

Usage:

"usage" of each element, as in how they're actually used on the pages. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Markup


            <p>
                <a href="/index.php" class="butlerWebDev__link">Home</a>
                >
                <a href="/support/index.php" class="butlerWebDev__link">Tutorials and Resources</a>
                
                    *ANY ADDITIONAL BREADCRUMB LINKS CAN BE ADDED HERE AS NEEDED*
                
                >
                Name of the current page
            </p>

Potential Design for a Nav Bar

This <nav> could be added at the bottom of the header on each page.

Usage:

This nav bar could increase the ease of navigation through the site. It could function alongside the breadcrumb links, or completely replace them.

Markup


            <a class="visually-hidden" href="#main">Skip to main content</a>
            
            <nav class="butlerWebDev__primaryNav">
                <menu class="butlerWebDev__primaryNavList">
                    <li> <a href="https://www.butlercc.edu/"> Home </a> </li>
                    <li> <a href="https://butlerccwebdev.net/index.php""> ButlerCC Webhosting </a> </li>
                    <li> <a href="https://butlerccwebdev.net/support/"> Tutorials & Resources </a> </li>
                </menu>
            </nav>

Main Page Footer

The footer on every page contains a short <p> with a <br>, then an <img> element placed inside an <a> which links to the butlercc.edu website.

Generously Provided by
Butler Community College

Usage:

This specifically sized <img> appears in the footer of every page, placed inside an <a> which links to the butlercc.edu website.

Markup

           
            <footer class="butlerWebDev__mainFooter">
                <p>
                Generously Provided by
                    <br>
                    <a href="https://www.butlercc.edu/">
                        <img src="/images/Butler_Horiz_206a.png"
                            alt="Butler Community College"
                            class="butlerWebDev__img"
                            width="206"
                            height="64">
                    </a>
                </p>
            </footer>