pure css nav bar with child links

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    pure css nav bar with child links

    been designing a nav bar with child links with pure css for my new script but also for abit of fun.
    and thought i would share my workings here incase someone else wanted a pure css solution without js.

    heres what i got so far.
    css
    Code:
    body {background-color:#111111; font-family:Verdana, sans-serif; font-size:0.8em; color:#408080;}
a {color:#408080;}
.nav {background-color:#1a1a1a; border:1px solid #408080; margin:5px; border-radius:7px;}
.nav ul {margin:0; padding:0;}
.nav ul li {display:block; float:left; position:relative;}
.nav ul li:hover {background-color:#0a0a0a;}
.nav ul li:hover > ul {display:block; position:absolute;}
.nav ul li a {text-decoration:none; color:#408080;}
.nav ul li ul {border-radius:7px; border:1px solid #408080; background-color:#1a1a1a; display:none; left:0px; width:250px; margin-top:6px;}
.nav ul li ul li {width:241px;}
.nav ul li ul li:hover {width:241px; background-color:#0a0a0a;}
.nav-first-parent-link {padding:6px 8px 6px; border-right:1px solid #408080; border-radius:7px 0px 0px 7px;}
.nav-middle-parent-link {border-right:1px solid #408080; padding:6px 8px 6px;}
.nav-last-parent-link {padding:6px 8px 6px; border-right:1px solid #408080; border-radius:0px 7px 7px 0px;}
.nav-single-child-link {padding:4px; border-radius:7px 7px 7px 7px;}
.nav-first-child-link {padding:4px; border-radius:7px 7px 0px 0px; border-bottom:1px solid #408080;}
.nav-middle-child-link {border-bottom:1px solid #408080; padding:4px;}
.nav-last-child-link {padding:4px; border-radius:0px 0px 7px 7px;}
.nav-padder {height:0px; clear:both;}
    HTML
    Code:
    <div class="nav">
<ul>
<!-- Show use of a parent with no child -->
<li class="nav-first-parent-link">
 <a href="#">Amazing</a>
</li>
<!-- Show use of a parent with a single child -->
<li class="nav-middle-parent-link">
<a href="#">CSS</a>
<ul>
<li class="nav-single-child-link"><a href="#">More CSS Links</a></li>
</ul>
</li>
<!-- Show use of a parent with 2 childs -->
<li class="nav-middle-parent-link">
<a href="#">Dropdown</a>
<ul>
<li class="nav-first-child-link"><a href="#">More Dropdown Links</a></li>
<li class="nav-last-child-link"><a href="#">More Dropdown Links</a></li>
</ul>
</li>
<!-- Show use of a parent with 3 childs or more -->
<li class="nav-middle-parent-link">
<a href="#">Menu</a>
<ul>
<li class="nav-first-child-link"><a href="#">More Menu Links</a></li>
<li class="nav-middle-child-link"><a href="#">More Menu Links</a></li>
<li class="nav-last-child-link"><a href="#">More Menu Links</a></li>
</ul>
</li>
</ul>
 <!-- A Padder To Clear Floats, Nothing More -->
<div class="nav-padder"></div>
</div>
    DEMO
    http://codepen.io/anon/pen/dPvMzy


    i would like to attempt to add sub child links also. but atm having issues solving this.
    if anyone wants to attempt it and solve it before me. please let me know thanks.
    <?php
    include ('Ghost');
    if ($Post == true) {
    echo '

    sigpic
    alt='coding-talk.com!!' />';
    echo 'Sharing Is Caring!';
    } else {
    echo '

    alt='the username GHOST has been comprimised!' />';
    echo 'OMG SOMEBODY HELP ME!!';
    }
    ?>
    Tags: None
    #2
    i have updated the pen with new improvements to css
    so no need to set a class for any of the <li> of parent or child anymore.
    also added sub levels within sub levels within sub levels.
    Enjoy...

    live demo + code: http://codepen.io/anon/pen/yyMjoJ

    HTML
    HTML Code:
    <!-- nav bar with sub levels within sub levels within sub levels etc.. -->
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Amazing</a>
<ul>
<li><a href="#">More Amazing Child Links</a></li>
<li><a href="#">More Amazing Child Links</a></li>
<li><a href="#">More Amazing Child Links</a></li>
<li><a href="#">More Amazing Child Links >></a>
<ul>
<li><a href="#">More Amazing Grandchild Links >></a>
<ul>
<li><a href="#">More Amazing Great Grandchild Links</a></li>
<li><a href="#">More Amazing Great Grandchild Links</a></li>
<li><a href="#">More Amazing Great Grandchild Links</a></li>
<li><a href="#">More Amazing Great Grandchild Links</a></li>
</ul>
</li>
<li><a href="#">More Amazing Grandchild Links</a></li>
</ul>
</li>
<li><a href="#">More Amazing Child Links</a></li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">More CSS Child Links</a></li>
<li><a href="#">More CSS Child Links</a></li>
<li><a href="#">More CSS Child Links</a></li>
</ul>
</li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="#">More Dropdown Child Links</a></li>
<li><a href="#">More Dropdown Child Links >></a>
<ul>
<li><a href="#">More Dropdown Grandchild Links</a></li>
<li><a href="#">More Dropdown Grandchild Links</a></li>
<li><a href="#">More Dropdown Grandchild Links</a></li>
<li><a href="#">More Dropdown Grandchild Links</a></li>
<li><a href="#">More Dropdown Grandchild Links</a></li>
</ul>
</li>
<li><a href="#">More Dropdown Child Links</a></li>
<li><a href="#">More Dropdown Child Links</a></li>
<li><a href="#">More Dropdown Child Links</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
</ul>
<div class="nav-padder"></div>
<div>
    CSS
    Code:
    body {background:#111111; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:0.8em; color:#408080;}
a {color:#408080;}
/** nav bar with sub levels within sub levels within sub levels etc.. */
.nav {background:#1a1a1a; border:1px solid #408080; margin:5px; border-radius:7px;}
.nav ul {list-style:none; float:left; margin:0; padding:0;}
.nav ul a {display:block; text-decoration:none;}
.nav ul li {position:relative; float:left; margin:0; padding:6px 8px 6px; border-right:1px solid #408080;}
.nav ul li:hover {background:#0a0a0a;}
.nav ul li:hover > ul {display:block;}
.nav ul li:first-of-type {border-radius:7px 0px 0px 7px;}
.nav ul ul {display:none; position:absolute; top:100%; left:0; border:1px solid #408080; background:#1a1a1a; padding:0;}
.nav ul ul li:first-of-type {float:none; width:250px; border-top:none;}
.nav ul ul li {float:none; width:250px; border-top:1px solid #408080; padding:4px; border-right:none;}
.nav ul ul a {text-decoration:none;}
.nav ul ul ul {top:0; left:100%;}
.nav-padder {height:0px; clear:both;}
    Last edited by Ghost; 20.01.15, 00:12.
    <?php
    include ('Ghost');
    if ($Post == true) {
    echo '

    sigpic
    alt='coding-talk.com!!' />';
    echo 'Sharing Is Caring!';
    } else {
    echo '

    alt='the username GHOST has been comprimised!' />';
    echo 'OMG SOMEBODY HELP ME!!';
    }
    ?>
    • Likes 2

    Comment

      #3
      Nice, check out what I'm making right now on Odesk http://watchseries.onl/demo/, just rushing a layout at first!
      Last edited by kevk3v; 21.01.15, 07:11.
      Mobile chat, iphone chat, android chat, chat, rooms http://www.aiochat.com

      Comment

        #4
        nice man. looks good, im gonna be re-creating the mysqli forums script i started to make before i had to dissapear.
        <?php
        include ('Ghost');
        if ($Post == true) {
        echo '

        sigpic
        alt='coding-talk.com!!' />';
        echo 'Sharing Is Caring!';
        } else {
        echo '

        alt='the username GHOST has been comprimised!' />';
        echo 'OMG SOMEBODY HELP ME!!';
        }
        ?>

        Comment

          #5
          Originally posted by kevk3v View Post
          Nice, check out what I'm making right now on Odesk http://watchseries.onl/demo/, just rushing a layout at first!
          the floating header has some strange margin/padding
          Click image for larger version Name: image_5443.png Views: 215 Size: 158.1 KB ID: 150957
          Advertise your mobile site for FREE with AdTwirl

          Comment

            #6
            Originally posted by GumSlone View Post

            the floating header has some strange margin/padding
            [ATTACH=CONFIG]n150957[/ATTACH]
            i noticed that aswell. i also recently noticed that the header sometimes sticks in wrong place when resizing window and header gets compressed. it sometimes ends in middle of page stopping you viewing part of site. if i can reproduce it ill post a ss here
            <?php
            include ('Ghost');
            if ($Post == true) {
            echo '

            sigpic
            alt='coding-talk.com!!' />';
            echo 'Sharing Is Caring!';
            } else {
            echo '

            alt='the username GHOST has been comprimised!' />';
            echo 'OMG SOMEBODY HELP ME!!';
            }
            ?>

            Comment

              #7
              Yeah guys, this is the first time I'm doing that sticky stuff, I used javascript to check if the height from the top passed the element then put it fixed in the same position it's in from getting the width from the left and height, that's why it's weird when you resize. Anyone have any tips how to make this great? the only way I can think of is positioning an invisible element where the content should be sticky, but if there's an easier way, please let me know
              Mobile chat, iphone chat, android chat, chat, rooms http://www.aiochat.com

              Comment

                #8
                Originally posted by Ghost View Post
                nice man. looks good, im gonna be re-creating the mysqli forums script i started to make before i had to dissapear.
                That could be fixed if I add a setInterval to the function, but I think i'll go with the invisible element, unless you guys have some tips?
                Mobile chat, iphone chat, android chat, chat, rooms http://www.aiochat.com

                Comment

                  #9
                  this is what happened this time: last time it was centered in middle of screen this time it flopped to top though.

                  also have you thought about a css solution.? responsive designs can be done using just css also now.

                  Click image for larger version Name: Untitled.png Views: 38 Size: 1.07 MB ID: 150963
                  <?php
                  include ('Ghost');
                  if ($Post == true) {
                  echo '

                  sigpic
                  alt='coding-talk.com!!' />';
                  echo 'Sharing Is Caring!';
                  } else {
                  echo '

                  alt='the username GHOST has been comprimised!' />';
                  echo 'OMG SOMEBODY HELP ME!!';
                  }
                  ?>

                  Comment

                    #10
                    take alook here. http://codepen.io/search?q=sticky+he...ow_forks=false
                    plenty of examples of css/jquery skicky headers etc.

                    if choose to use any of these. remember to wrap the jquery properly.
                    the site uses prewrap functions to execute your jquery so users who leave these pens dont include the function wrap

                    example:
                    $(document).ready(function(){
                    //jquery here.
                    }
                    <?php
                    include ('Ghost');
                    if ($Post == true) {
                    echo '

                    sigpic
                    alt='coding-talk.com!!' />';
                    echo 'Sharing Is Caring!';
                    } else {
                    echo '

                    alt='the username GHOST has been comprimised!' />';
                    echo 'OMG SOMEBODY HELP ME!!';
                    }
                    ?>

                    Comment

                      #11
                      Originally posted by Ghost View Post
                      this is what happened this time: last time it was centered in middle of screen this time it flopped to top though.

                      also have you thought about a css solution.? responsive designs can be done using just css also now.

                      [ATTACH=CONFIG]n150963[/ATTACH]
                      That's because the function only runs once, I have to run it more than once to update the position like I said lol. I want to do my own!
                      or $(function(){

                      });
                      Mobile chat, iphone chat, android chat, chat, rooms http://www.aiochat.com

                      Comment

                        #12
                        @kevk3v you can do it only with css:
                        position:fixed;
                        top:0;
                        margin:0 auto;
                        z-index:1000;

                        the content below the header should have
                        margin-top: {=height of the header}
                        Advertise your mobile site for FREE with AdTwirl

                        Comment

                          #13
                          nice work gum ill use it =) thanks

                          http://wapx.amob.com
                          Applications, Games, Wallpapers, Ringtones, Videos, Themes, Screensaver and More!!!

                          Comment

                            #14
                            Originally posted by wapxtech View Post
                            nice work gum ill use it =) thanks
                            what you going to use that is gumslones? lol
                            <?php
                            include ('Ghost');
                            if ($Post == true) {
                            echo '

                            sigpic
                            alt='coding-talk.com!!' />';
                            echo 'Sharing Is Caring!';
                            } else {
                            echo '

                            alt='the username GHOST has been comprimised!' />';
                            echo 'OMG SOMEBODY HELP ME!!';
                            }
                            ?>

                            Comment

                            Previous template Next
                            Working...
                            X