- This topic is empty.
-
AuthorPosts
-
October 31, 2013 at 6:14 am #154712AnonymousInactive
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.
October 31, 2013 at 8:00 am #154718Paulie_DMemberWas 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?
November 1, 2013 at 1:44 am #154864AnonymousInactiveGreetings 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.
November 1, 2013 at 3:38 am #154875Paulie_DMemberPerhaps you could make us a Codepen of what you have so we can tinker with the code…
November 5, 2013 at 2:42 am #155194AnonymousInactiveGreetings,
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.
November 5, 2013 at 2:51 am #155195Paulie_DMemberCodepen can be found at Codepen.io
November 5, 2013 at 3:50 am #155196AnonymousInactiveThe 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>
November 5, 2013 at 4:00 am #155200AnonymousInactiveI 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.
November 5, 2013 at 5:35 am #155205Paulie_DMemberCodepen 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?
November 5, 2013 at 6:17 am #155208paulobParticipantHi,
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.
November 5, 2013 at 8:01 am #155218Paulie_DMemberThe comments were, I think, mine from an old demo…some of them certainly do not apply any longer.
Use with care.
November 5, 2013 at 8:11 am #155220paulobParticipantAh 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.)
November 5, 2013 at 6:45 pm #155199AnonymousInactiveHere’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>
November 6, 2013 at 12:00 am #155296AnonymousInactiveGreetings 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.
November 6, 2013 at 2:42 am #155307Paulie_DMember(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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.