Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Resolved] Best approach to creating a horiz menu bar?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #154712
    Anonymous
    Inactive

    Greetings,

    I am trying to adapt a menu that someone (I believe Paulie_D) put on here in reference to a post by another member/user. I think this type of menu will be adaptable to look like one I did using js but is woefully inefficient. As seen in the first link I’ve tried to recreate the border I had using the ridge border style value, but can’t get it the way I want. Also, the text isn’t as robust as I would like. Could I use a widget for this, or is there a way to do it using just CSS?

    Best Regards.

    #154718
    Paulie_D
    Member

    Was it this one? : http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

    Ideally, you would create a finished design example of the whole menu (and bar) in, perhaps, Photoshop, and we can work from that.

    Are you trying for some version of the 3D border / button effect on all the list items?

    #154864
    Anonymous
    Inactive

    Greetings Paulie,

    I don’t recall if that is the one or not but it seems equally adaptable.

    I’m not sure what you mean by a finished design example. Do you mean of a widget? If you mean the basic design of the menu, I provided links above which are working ok for me.

    Best Regards.

    #154875
    Paulie_D
    Member

    Perhaps you could make us a Codepen of what you have so we can tinker with the code…

    #155194
    Anonymous
    Inactive

    Greetings,

    I’ve attempted to post a reply to this but cannot. I’ve had this problem in the past as have others.

    Anyway, I don’t have Codepen and as I cannot post the coding here in block code, would you please take it from the source code of both examples given above? All of the coding is present for both in the head and body tags.

    Best Regards.

    #155195
    Paulie_D
    Member

    Codepen can be found at Codepen.io

    #155196
    Anonymous
    Inactive

    The code from this page is below. The code for what I’d like for it to look like will follow, hopefully.

    <style type="text/css">
        * {
          box-sizing:border-box;   
    
        }
    
        nav, .content {
          width:650px; /* an arbitrary width */
          margin: 0 auto; /* center the elements */
    
        }
    
        nav {
          margin-top:20px; /* just a little bit of margin */
          background: #292929;  
    
        }
    
        .top-nav {
          font-size:0; /* eliminates whitespace from inline-block*/
          font-family:Arial, Helvetica, sans-serif;
    
        }
    
        .top-nav li {
          display:inline-block; /* blocks just line up without floats */
          width:94px; /* Just a number */
          background: #000000;  
          position:relative; /* sets positioning context for 2nd level menu */
    
        }
    
        .top-nav > li.active > a {
          color:white; /* just an active class - not required */
    
        }
    
        .top-nav > li a {
          text-decoration:none; /* removes list bullets */
          font-size:9px;/* re-establish a font-size */
          line-height:14px; /* centers the text vertically*/
          text-align:left; padding-left:15px;/* centeres the text horizontally */
          display:block; /* links now fill the block*/
          color:white; 
    
        }
    
    
        .top-nav > li a {
          /* groove type border effect */
          border:ridge #5A524A;
    
        }
    
    
        .top-nav > li > a:hover,
        .sub-nav > li > a:hover,
        .tert-nav > li > a:hover{
          /* hover color for links */
          color:#E7DEC6;
    
        }
    
        .sub-nav { /* just a class name for 2nd level menus */
          position:absolute;
        /* positions the menu UNDER the list item*/
          width:123px; 
        /* makes the width of the menu the same as the list item */
          visibility:hidden; 
        /* hides the menu until needed */
    
        }
    
        .top-nav li:hover .sub-nav {
          visibility:visible; 
        /* shows the submenu when the list item is hovered */
    
        }
    
        .sub-nav > li, .sub-nav > li a{
          display:block;
          width:123px;
          position:relative; 
        /* sets positioning context for 3rd level menu */
          background:#000000; 
        /* something different for example */
          color:white;
    
        }
    
        .sub-nav > li a {
          /* jsut some styling */
          border:ridge #5A524A;
    
        }
    
        .sub-nav > li:first-child {
          border-top: none;
    
        }
    
        .sub-nav > li:last-child {
          border-bottom: none;
    
        }
    
        .tert-nav {
          position:absolute; /* positions the 3rd level menu */
          width:100px;
          visibility:hidden; /* hides the menu until required */
    
        }
    
        .sub-nav li:hover .tert-nav {
          visibility:visible; /* shows the menu when list item is hovered */
          display:block;
          width:100px;
          position:absolute;  /* positions the list items of 3rd level menu */
          top:0%; /* lines up the menu with the list item */
          left:100%; /* pushes the list item over to the right side */
    
        }
    
        .tert-nav > li, .tert-nav > li a {
          display:block;
          width:90px;
          background:#292929; /* another level, another color */
    
        }
    
        </style>
    
    
        <nav>
          <ul class="top-nav">
            <li class="active"><a href="#">ABOUT US</a></li>
            <li><a href="#">LEARNING CENTER</a>
              <ul class="sub-nav">
                <li><a href="#">sub nav 1</a></li>
                <li><a href="#">sub nav 2</a></li>
                <li><a href="#">sub nav 3</a></li>
                <li><a href="#">sub nav 4</a></li>
              </ul>
            </li>
            <li><a href="#">RRESEARCH</a>
              <ul class="sub-nav">
                <li><a href="#">Reasearch sub nav 1</a>
                  <ul class="tert-nav">
                    <li><a href="#">Reasearch sub itm 1.1</a></li>
                    <li><a href="#">Reasearch sub itm 1.2</a></li>
                    <li><a href="#">Reasearch sub itm 1.3</a></li>
                    <li><a href="#">Reasearch sub itm 1.4</a></li>
                  </ul>      
                </li>
                <li><a href="#">Item 2</a>
                  <ul class="tert-nav">
                    <li><a href="#">Sub-Item 2.1</a></li>
                    <li><a href="#">Sub-Item 2.2</a></li>
                    <li><a href="#">Sub-Item 2.3</a></li>
                    <li><a href="#">Sub-Item 2.4</a></li>
                  </ul> 
                </li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
              </ul>
            </li>
            <li><a href="#">WHAT'S NEW</a></li>
          </ul>
        </nav>
    
    #155200
    Anonymous
    Inactive

    I can’t get the other code to post, so am giving up.

    I don’t have codepen and haven’t the time to take another program on to learn. If what I’ve provided can’t be used, I’m out of luck I suppose.

    #155205
    Paulie_D
    Member

    Codepen is NOT a program…it’s a website that lets you plug in your HTML/CSS and it’s instantly updates…it’s like JSfiddle….but better.

    http://codepen.io/anon/pen/ranJe

    So…what did you want to do?

    #155208
    paulob
    Participant

    Hi,

    Did you mean something like this ?

    I just used the code you posted and changed the borders and re-arranged the code a little. I left all your comments in place.

    The dropdown width is controlled by the text it holds although I did set a min-width for small items.

    #155218
    Paulie_D
    Member

    The comments were, I think, mine from an old demo…some of them certainly do not apply any longer.

    Use with care.

    #155220
    paulob
    Participant

    Ah ok :)

    (I wouldn’t usually use the font-size:0 hack for inline-blocks these days as there are better methods but I left them in place as I didn’t want to confuse by changing to another method.)

    #155199
    Anonymous
    Inactive

    Here’s what I’d like the menu to look like.

    <style>body{font-family:arial;}
            tablea{color:white;text-decoration:none;font:bold}a:hover{color:#606060}
            td.menu{background:grey}
            table.menu
            {position:absolute;
            visibility:hidden;
            }</style>
    
            <script>function showmenu(elmnt)
            {document.getElementById(elmnt).style.visibility="visible";
            }
            function hidemenu(elmnt)
            {
            document.getElementById(elmnt).style.visibility="hidden";
            }</script>
    
    
            <TABLE BORDER=0 BGCOLOR="#999999" CELLSPACING=0 CELLPADDING=0 WIDTH=94>
                        <TR>
                           <TD onMouseOver="showmenu('about')" onMouseOut="hidemenu('about')" WIDTH=94>
                              <P><A HREF="/default.asp"><IMG SRC="http://www.wslmf.org/museum/about us.gif" WIDTH=94 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/about us 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/about us.gif'"></A><BR>
                              <TABLE BORDER=0 BGCOLOR="#999999" CELLSPACING=0 CELLPADDING=0 WIDTH=123 HEIGHT=20 class=menu id=about>
                                 <TR>
                                    <TD VALIGN=top WIDTH=123 HEIGHT=20>
                                       <P><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=123 HEIGHT=20>
                                          <TR>
                                             <TD onMouseOver="showmenu('who')" onMouseOut="hidemenu('who')" WIDTH=123 HEIGHT=20>
                                                <CENTER><A HREF="who.asp"><IMG SRC="http://www.wslmf.org/museum/who we are.gif" WIDTH=123 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/who we are 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/who we are.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                       </TABLE>
                                       </P>
                                    </TD>
                                    <TD VALIGN=top onMouseOver="showmenu('who')" onMouseOut="hidemenu('who')" WIDTH=125 HEIGHT=20>
                                       <P><TABLE BORDER=0 BGCOLOR="#999999" CELLSPACING=0 CELLPADDING=0 WIDTH=153 HEIGHT=100 class=menu id=who>
                                          <TR>
                                             <TD onMouseOver="showmenu('who')" onMouseOut="hidemenu('who')" WIDTH=153 HEIGHT=20>
                                                <CENTER><A HREF="mission.asp"><IMG SRC="http://www.wslmf.org/museum/mission.gif" WIDTH=153 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/mission 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/mission.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                          <TR>
                                             <TD WIDTH=153 HEIGHT=20>
                                                <CENTER><A HREF="chaircouncil.asp"><IMG SRC="http://www.wslmf.org/museum/chairmanscouncil.gif" WIDTH=153 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/chairmanscouncil 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/chairmanscouncil.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                          <TR>
                                             <TD WIDTH=153 HEIGHT=20>
                                                <CENTER><A HREF="board.asp"><IMG SRC="http://www.wslmf.org/museum/board.gif" WIDTH=153 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/board 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/board.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                          <TR>
                                             <TD WIDTH=153 HEIGHT=20>
                                                <CENTER><A HREF="administration.asp"><IMG SRC="http://www.wslmf.org/museum/administration.gif" WIDTH=153 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/administration 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/administration.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                          <TR>
                                             <TD WIDTH=153 HEIGHT=20>
                                                <CENTER><A HREF="foundation.asp"><IMG SRC="http://www.wslmf.org/museum/foundation.gif" WIDTH=153 HEIGHT=20 BORDER=0 ALIGN=middle onMouseOver="this.src='//www.wslmf.org/museum/foundation 2.gif'" onMouseOut="this.src='//www.wslmf.org/museum/foundation.gif'"></A></CENTER>
                                             </TD>
                                          </TR>
                                       </TABLE>
                                       </P>
                                    </TD>
                                 </TR>
                              </TABLE>
                              </P>
                           </TD>
                        </TR>
                     </TABLE>
    
    #155296
    Anonymous
    Inactive

    Greetings Paul,

    YES, it looks GREAT!!! Give me some time to study it please. Thank you so much!!

    Best Regards.

    To the forum team; it’s rather odd and confusing to the conversation when posts are greatly delayed. My post dated November 5, 2013 at 6:45 pm was actually made some time earlier and would not show on the forum. I addressed this above and others have had similar difficulty posting. My post showing much later than when actually submitted makes it appear it was posted by me after Paulob addressed my question and this was not the case.

    #155307
    Paulie_D
    Member

    (I wouldn’t usually use the font-size:0 hack for inline-blocks these days as there are better methods but I left them in place as I didn’t want to confuse by changing to another method.)

    Which do you prefer and why are they better?

    Just for my reference as the font-size hack seems to be the most reliable and flexible although, of course, it does have it’s drawbacks.

Viewing 15 posts - 1 through 15 (of 29 total)
  • The forum ‘CSS’ is closed to new topics and replies.