Menu CSS: Ontwerp Een Perfecte Website Navigatie

Heel erg mooie index!

<div class="tj-tools">
    <a class="tj-tool tj-new" href="/voice-generator">
        <span class="tj-icon">🗣️</span>
        <span class="tj-info">
            <strong>Voice generator</strong>
            <small>Laat ons systeem jouw tekst zeggen</small>
        </span>
<span class="tj-badge">NEW</span> 
    </a>
    <a class="tj-tool tj-new" href="/website-checker">
        <span class="tj-icon">💻</span>
        <span class="tj-info">
            <strong>SEO Website checker</strong>
            <small>Analyseer je website</small>
        </span>
<span class="tj-badge">NEW</span>
    </a>
<a class="tj-tool tj-new" href="/seo-generator">
        <span class="tj-icon">✨</span>
        <span class="tj-info">
            <strong>SEO Generator</strong>
            <small>Maak SEO-titels en meta descriptions met AI</small>
        </span>
        <span class="tj-badge">NEW</span>
    </a>
    <a class="tj-tool tj-new" href="/html-tester">
        <span class="tj-icon">🧪</span>
        <span class="tj-info">
            <strong>HTML Tester</strong>
            <small>Test snel je HTML-code online</small>
        </span>
        <span class="tj-badge">NEW</span>
    </a>
    <a class="tj-tool" href="/html2java">
        <span class="tj-icon">⚡</span>
        <span class="tj-info">
            <strong>HTML naar Javascript</strong>
            <small>Zet HTML-code om naar Javascript</small>
        </span>
        <span class="tj-badge tj-tip">TIP</span>
    </a>
    <a class="tj-tool" href="/online-tools/html2javatool/">
        <span class="tj-icon">🔄</span>
        <span class="tj-info">
            <strong>HTML naar Javascript 2</strong>
            <small>Alternatieve HTML naar Javascript converter</small>
        </span>
    </a>
    <a class="tj-tool" href="/html-code-encryptor-decryptor/">
        <span class="tj-icon">🔐</span>
        <span class="tj-info">
            <strong>HTML Encryptor / Decryptor</strong>
            <small>Versleutel of ontsleutel HTML-code</small>
        </span>
    </a>
    <a class="tj-tool" href="/online-tools/wachtwoord-generator/">
        <span class="tj-icon">🔑</span>
        <span class="tj-info">
            <strong>Wachtwoord Generator</strong>
            <small>Maak snel een sterk willekeurig wachtwoord</small>
        </span>
    </a>
    <a class="tj-tool" href="/online-tools/versleutel-tekst/">
        <span class="tj-icon">🔏</span>
        <span class="tj-info">
            <strong>Tekst versleutelen</strong>
            <small>Versleutel woorden en teksten</small>
        </span>
    </a>
    <a class="tj-tool" href="/online-tools/youtube-code-generator">
        <span class="tj-icon">▶️</span>
        <span class="tj-info">
            <strong>YouTube Code Generator</strong>
            <small>Maak eenvoudig YouTube embed-code</small>
        </span>
    </a>
</div>
<style>
/* ==============================
   TOOLJUNKIE - ONLINE TOOLS MENU
   ============================== */
.tj-tools {
    width: 100%;
    max-width: 850px;
    margin: 15px auto 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* Tegel */
.tj-tool,
.tj-tool:link,
.tj-tool:visited {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,.08);
    color: #333;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}
/* Hover */
.tj-tool:hover {
    transform: translateY(-2px);
    border-color: #3b8dbd;
    box-shadow:
        0 5px 15px rgba(0,0,0,.13);
    text-decoration: none;
}
/* Icoon */
.tj-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f3f5;
    font-size: 22px;
}
/* Tekst */
.tj-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tj-info strong {
    color: #333;
    font-size: 14px;
    line-height: 1.25;
}
.tj-info small {
    color: #888;
    font-size: 11px;
    line-height: 1.35;
}
/* NEW / TIP */
.tj-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 3px 6px;
    border-radius: 4px;
    background: #ff174d;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .5px;
}
.tj-badge.tj-tip {
    background: #3b8dbd;
}
/* Mobiel */
@media (max-width: 650px) {
    .tj-tools {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .tj-tool {
        min-height: 70px;
        padding: 11px 13px;
    }
    .tj-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 20px;
    }
}
</style>

Voorbeeld:

🗣️ Voice generator Laat ons systeem jouw tekst zeggen NEW 💻 SEO Website checker Analyseer je website NEW ✨ SEO Generator Maak SEO-titels en meta descriptions met AI NEW 🧪 HTML Tester Test snel je HTML-code online NEW ⚡ HTML naar Javascript Zet HTML-code om naar Javascript TIP 🔄 HTML naar Javascript 2 Alternatieve HTML naar Javascript converter 🔐 HTML Encryptor / Decryptor Versleutel of ontsleutel HTML-code 🔑 Wachtwoord Generator Maak snel een sterk willekeurig wachtwoord 🔏 Tekst versleutelen Versleutel woorden en teksten ▶️ YouTube Code Generator Maak eenvoudig YouTube embed-code

Heel erg mooi index overzicht (menu)

Geef een reactie Reactie annuleren

Archives