www.webdeveloper.com
Results 1 to 9 of 9

Thread: can you do this with only css? without using javascrip?

  1. #1
    Join Date
    Jun 2014
    Posts
    17

    can you do this with only css? without using javascrip?

    ok im trying to copy a website for practicing my coding and this is the second problem that im facing with that, at first my problem was the background and now its the navigation bar. this is the website im trying to copy http://www.hotnewhiphop.com/ and up to now i copied everything of the header, and it looks good, but my problem is that i cant get the navigation bar to work properly, i dont know how to do it. when i go with my cursor over the sections (top 100, songs, mixtapes etc) the top border changes color and even the text and that's good, but i dont know how to make that little menu that "pops up", example: if you go with the mouse over "top 100" the "songs, mixtapes, hall of fame" menu shows up. do you guys know how to do it? can i do it only with css?

    this is my html:
    <ul id="navul">
    <li class="navli"><a href="#" class="anav" id="tophundred">TOP 100</a></li>
    </ul>


    and this is the css:
    #navul {list-style-type: none;
    margin-left: 20px;}


    .navli {display: inline;
    float: left;
    margin-top: 5px;
    text-align: center;
    font-size: 13px;}


    .anav {color: white;
    text-decoration: none;
    width: 100px;
    float: left;
    margin-left: 0px;}


    #tophundred:hover {color: red;
    border-top: 1px solid red;
    padding-top: 5px;
    position: relative;
    top: -6px;}

  2. #2
    Join Date
    Dec 2012
    Posts
    100
    You just need to put the hidden "sub menu" inside the li, then add a hover pseudo style to the li which affects the sub menu within it making it appear.

    HTML Code:
    <ul id="navul">
        <li class="navli">
            <a href="#" class="anav" id="tophundred">TOP 100</a>
            <div class="sub-menu">
               Sub menu
            </div>
        </li>
    </ul>
    Code:
    #navul	 {list-style-type: none;
    margin-left: 20px;}
    
    
    .navli {display: inline;
    float: left;
    margin-top: 5px;
    text-align: center;
    font-size: 13px;}
    
    
    .anav {color: white;
    text-decoration: none;
    width: 100px;
    float: left;
    margin-left: 0px;}
    
    
    #tophundred:hover {color: red;
    border-top: 1px solid red;
    padding-top: 5px;
    position: relative;
    top: -6px;}
    
    .sub-menu {
    display: hidden;
    }
    
    .navli:hover .sub-menu {
    display: block;
    }
    Then just style the sub menu however you want.

  3. #3
    Join Date
    Jun 2014
    Posts
    17
    thanks for the answer man but that doesn't work, cause "hidden" is not a valid value for the "display" element, and even if i write "none" (same thing as hidden pretty much) nothing happen when i go with my mouse over the link, and if i try "visibility: hidden;" still nothing happen. i dont know what to do
    Last edited by jedaisoul; 07-02-2014 at 03:31 PM. Reason: lengthy quote removed

  4. #4
    Join Date
    Jun 2014
    Posts
    17
    ok i kinda resolved my problem, i can create a sub menu, but i cant get the last ones to go to the left, if you go to that website and you go with the mouse over "news" and "features" you can see that the sub menu goes towards the left, and mine goes towards the right like the other ones. to resolve that i tried to insert "position: absolute; right: #;" but i wont work, because when i resize the browser window to small the sub menu wont stay under the "news" or "features" link, it goes to the right; that's because of the background. infact if you go on that website and you resize your window, you can see that if you try to scroll left or right it wont ever go over the white part (the content part), so if i write for example: "right: 100px;" it will go 100px to the right (starting from the border of the screen) (when the browser window is fully opened) and its gonna stay under the link, but when i resize the window to a small one it will still go 100px from the border of the BROWSER WINDOW but it wont stay under the link because now the link is closer to the border of the window (since a part the background is like "gone"). how can i resolve this? i know its confusing to explain =/

    this is my code by the way:

    html:
    Code:
    <ul id="navul">
    <li class="navli"><a href="#" class="anav" id="tophundred">TOP 100</a><div class="sub-menu-right"><span class="spanmenu">Sub menu</span></div></li>
    
    <li class="navli"><a href="#" class="anav" id="Songs">SONGS</a><div class="sub-menu-right">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="Mixtapes">MIXTAPES</a><div class="sub-menu-right">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="videos">VIDEOS</a><div class="sub-menu-right">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="hotties">HOTTIES</a><div class="sub-menu-right">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="heat">HEATSEEKERS</a><div class="sub-menu-right">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="artists">ARTISTS</a></li>
    
    <li class="navli"><a href="#" class="anav" id="news">NEWS</a><div class="sub-menu-news">Sub menu</div></li>
    
    <li class="navli"><a href="#" class="anav" id="features">FEATURES</a><div class="sub-menu-features">Sub menu</div></li>
    </ul>
    css:
    Code:
    nav 						{width: 990px;
    							height: 30px;
    							background-color: black;
    							margin-top: -16px;}
    
    
    #navul						{list-style-type: none;
    							margin-left: 20px;}
    .navli 						{display: inline;
    							float: left;
    							margin-top: 5px;
    							text-align: center;
    							font-size: 13px;}
    
    
    .anav 						{color: white;
    							text-decoration: none;
    							width: 100px;
    							height: 24px;
    							float: left;
    							margin-left: 0px;}
    
    
    #tophundred:hover 			{color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #Songs:hover 				{color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #Mixtapes:hover 			{color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #videos:hover 			   {color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #hotties:hover 			    {color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #heat:hover 			    {color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #artists:hover 			    {color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #news:hover 			    {color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #features:hover 			{color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    #tophundred:hover 			{color: red;
    							border-top: 1px solid red;
    							padding-top: 5px;
    							position: relative;
    							top: -6px;}
    
    
    .sub-menu-right 			{position: absolute;
    							top: 167px;
    							visibility: hidden;}
    
    .navli:hover .sub-menu-right {background-color: black;
    							width: 425px;
    							height: 220px;
    							visibility: visible;}
    
    
    .sub-menu-news 				{position: absolute;
    							top: 167px;
    							visibility: hidden;}
    
    
    .navli:hover .sub-menu-news {background-color: black;
    							width: 425px;
    							height: 220px;
    							position: absolute;
    							right: 133px;
    							visibility: visible;}
    
    
    
    .sub-menu-features 			{position: absolute;
    							top: 167px;
    							visibility: hidden;}
    
    
    .navli:hover .sub-menu-features {background-color: black;
    							width: 425px;
    							height: 220px;
    							position: absolute;
    							visibility: visible;}
    Last edited by jedaisoul; 07-02-2014 at 03:33 PM. Reason: code tags added

  5. #5
    Join Date
    May 2014
    Posts
    912
    Ok, first up a BIG tip, if every single tag inside a classed or ID'd parent container is getting the same class, NONE of them need classes! Target by tag, not by class! A dearly departed friend of mine used to compare it to the old George Carlin routine about "not every ejaculation deserves a name.".. not every tag should have a class on it. Complete waste of code!

    So first, let's clean up your markup.

    Code:
    <ul id="mainMenu">
    	<li>
    		<a href="#">TOP 100</a>
    		<div>
    			<ul>
    				<li>Test 1</li>
    				<li>Test 2</li>
    				<li>Test 3</li>
    			</ul>
    			<img src="images/test.png" alt="test image">
    			<span>
    				Song Title<br />
    				Album Name<br />
    				<i>DD Month YYYY at 00:00</i>
    			</span>
    			<img src="images/test.png" alt="test image">
    			<span>
    				Song Title<br />
    				Album Name<br />
    				<i>DD Month YYYY at 00:00</i>
    			</span>
    			<img src="images/test.png" alt="test image">
    			<span>
    				Song Title<br />
    				Album Name<br />
    				<i>DD Month YYYY at 00:00</i>
    			</span>
    		</div>
    	</li><li>
    		<a href="#">SONGS</a>
    		<div>Sub menu</div>
    	</li><li>
    		<a href="#">MIXTAPES</a>
    		<div>Sub menu</div>
    	</li><li>
    		<a href="#">VIDEOS</a>
    		<div>Sub menu</div>
    	</li><li>
    		<a href="#">HOTTIES</a>
    		<div>Sub menu</div>
    	</li><li>
    		<a href="#">HEATSEEKERS</a>
    		<div>Sub menu</div>
    	</li><li>
    		<a href="#">ARTISTS</a>
    	</li><li class="alternate">
    		<a href="#">NEWS</a>
    		<div>Sub menu</div>
    	</li><li class="alternate">
    		<a href="#">FEATURES</a>
    		<div>Sub menu</div>
    	</li>
    </ul>
    For the dropdowns I would use overflow:hidden on the LI.

    Gimme a few, and I'll toss together a demo of that, AND I'll write up a section by section breakdown explaining the how/why of it.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    912
    Made a few markup changes as I went, but here it is:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/andreaBurgio

    is wide open for easy access to the gooey bits and pieces.

    I'm heading to bed (I hope) but when I get up I'll go through and write up a breakdown of the how/what/why of it so you can read along and learn from it.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Jun 2014
    Posts
    17
    thank you soooooo much man! you're great (as always!)

  8. #8
    Join Date
    May 2014
    Posts
    912
    Alright, let's break it down for you. We'll start in the markup.

    I always write in XHTML 1.0 Strict -- it is one of the two recommendation doctypes (the other being HTML 4.01) and even if I 'have' to use HTML 5, I write as 4 Strict first and swap the doctype at the last minute. I use XHTML because I find the more consistent structural rules to be cleaner, and STRICT because it means the validator will throw errors if I try to use markup that has no business on websites any time after 1997.

    You'll notice I have a veiwport meta -- those are the values for viewport you should set if you plan on designing for mobile; it tells mobile browsers not to lie about the device resolution, or to start out with some arbitrary zoom. Some people throw other 'scale' values in there, and I've no clue why since they break zooming on mobile!

    Notice my stylesheet LINK has a MEDIA target. "screen" is obvious, that's most devices. "projection" is used by some kiosks and browsers when running in full screen mode, so we want that, and a handful of devices either still report themselves as TV, or override your stylesheet with their own values if you don't say TV -- so as a rule of thumb, say all three for your "screen" target. I also call the stylesheet "screen" so I know WHICH stylesheet it is, instead of the uselessly vague nonsense some people use like "layout.css" or "style.css".

    I also put <html><head>, </head><body> and </body></html> on single lines for a reason - most people think it's to save a character, but that's not it. I do so as a reminder that NOTHING other than whitespace should EVER go between those elements. People insert crap between those tags WAY too often, putting them together as a single line reduces the odds of the copypasta crowd screwing things up.

    The core of it isn't too complex. Nested lists, DIV for grouping child elements, span for grouping inside the DIV... Pretty simple. The only real thing that needs explaining is that .alternate means the menu item is past the middle of the menu, so dropdowns should be positioned off the right edge, not the left.

    In the CSS:
    http://www.cutcodedown.com/for_other...gio/screen.css

    I always start out with a "reset" -- Making sure certain values in certain tags start out the same.

    There are smaller resets like the so called "universal" one of "* { margin:0; padding:0; }" but that can make life hard when it comes to dealing with form elements like INPUT, SELECT and TEXTAREA, as both FF and IE have oddball paddings you have no control over and react differently to padding changes than "Rest of World" (RoW) thanks to their pre 2003 legacy.

    There are also larger resets like Eric Meyer's "reset reloaded", but that one wastes a bunch of time setting values that don't start out different cross browser and you're just going to be changing anyways -- bloated resets like that one border on being a framework, and are what gives resets a bad name.

    The one I use at barely a quarter of a K of code is small enough not to sweat it, and does what needs to be done, nothing more. It's the nice safe middle-ground; and sometimes that's your best bet -- truth lies somewhere in the middle.

    One thing I do is hide HR. We didn't use them in this example, but they are something I use for semantics in a full design, and that's part of my starting stylesheet. Usually I want their semantic meaning, not their appearance, hence hiding them.

    The first media query on the page is to send text-size-adjust just to small screens. That value also tells mobile devices that we know what we are doing, so don't override our font-size choices. I have to put it in a media query as if it's sent to OSX Safari, it breaks zooming -- a laugh as it does NOT break zooming on iOS Safari. (which is some serious herpafreakingderp on Apple's part)

    So, on to the actual layout:

    body I set the font-size I'm likely to use on the majority of page elements. I use % so it's automatically based on the user's preferences. If I declared any widths in the layout I'd use EM's to that end as well. Declaring font sizes in pixels is a steaming pile of /FAIL/ at web design in all but the narrowest of corner cases (like under a image-replacement) which is why designs -- like the one you're trying to copy -- are rubbish I'd tell the site owner to pitch in the trast. I think I already mentioned that said site is chock full of poor design choices that make it an accessibiltiy train wreck. NOT sure it's a design I'd be trying to emulate, even as a learning exercise.

    #mainMenu -- turn off the bullets. I redeclare the line-height just in case some other parent element interferes as the menu is going to rely on that staying 1.5em aka 150%.

    #mainMenu li -- I float them as it's VERY hard to get inline-block elements to 'behave' with dropdowns. The relative positioning lets us absolute position child elements based on the dimensions of this LI instead of based on the window... The zoom fixes legacy IE behavior when it comes to positioning. Finally there's an overflow:hidden, meaning anything 'outside' the flow dimensions of the LI is hidden.

    #mainMenu li:hover -- when the LI is hovered, we make stuff outside the LI's flow dimensions visible. There's your dropdown. I went with a brighter background just to make it clearer what's going on.

    #mainMenu a -- we can't just display:block these or IE7 will have the "staircase bug" where instead of being next to each-other they will drop down the line-height looking, well... like a staircase across the screen. Float doesn't have that problem. Pad them, strip off the underscore, color... nothing to write home about.

    #mainMenu div -- the dropdown itself. Absolute positioned at the bottom left corner. That 2em is the 1.5em line-height plus the 0.25em top and bottom padding on the anchor. TRY to avoid declaring fixed heights on containers as you then cease to be 'elastic' and when things like padding gets involved you can start to have major headaches.

    It's why as a rule of thumb I try to avoid declaring width or height the same time as padding and border. Lets you dodge box model headaches and is just ... simpler.

    #mainMenu .alternate div -- It is VERY hard to convince browsers once you've set a 'left' value in CSS to set it back to 'auto', even if the property exists. What we WANT is right:0, but if resetting left is ignored we end up with a dropdown area the width of the parent link. Solution? If we set it "left:100%" it will slide all the way across the width of the parent. A negative margin equal to the element's width (of 26em) will then slide it back to the left exactly where we want it. We shouldn't have to do it that way, but certain browsers (FF and IE) both still have their heads up their backside on this.

    #mainMenu div div - the inner DIV is for the second column preventing it from de-indenting under the floated image. IF you don't care about IE7/earlier you could use the sibling selector ">" for "#mainMenu li>div" on the previous two declarations so we don't have to override values, but I prefer to go for compatibility. As such we have to undo everything we set on "#mainMenu div" for positioning. Then it's a simple matter of adding float wrapping behavior to it.

    #mainMenu div div a -- likewise the anchors inside this neeed to be set to block and have overflow behavior.

    #mainMenu div div a:hover -- just some color and style. Nothing fancy.

    #mainMenu div div i -- the I(talic) tag means "would be italic in professional writing", NOT that it "must be italic". When TBL made HTML many target devices couldn't even SHOW italics. A date as sub-info is a likely candidate for using this tag... even if we are showing it greyed instead of italic. People who say "shouldn't that be a EM" don't know enough about what B, I, EM or STRONG mean to be flapping their gums on the subject.

    #mainMenu ul -- the inner menu gets a EM width and floated. Again, nothing too fancy.

    #mainMenu li li,
    #mainMenu li li a,
    #mainMenu li div a
    -- all our nested anchors in the dropdown as well as the inner LI we need to unset the float and overflow behaviors we gave their parents. Again, if we had targeted those using the child selector of ">" we wouldn't have to do this, but legacy IE doesn't know that selector.

    #mainMenu li li a -- border, yawn.

    #mainMenu li li:first-child a -- no border on the first one, *YAWN*

    #mainMenu li li a:hover -- color... *STRETCH* YAAAAAAWN.

    #mainMenu div div img -- the innermost images are floated with some margins. Again, nothing fancy.

    ... and that's the full explanation.

    Hope this helps.
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    Jun 2014
    Posts
    17
    wow thanks for the long explanation man, i learned a lot, but i couldn't understand everything, cause i dont have that much of experience, from now on im not going to use "pixels" anymore but "em" and "percentage", im gonna use the "media" target in the "<link> element, im gonna use the "viewport" thing in the <meta element> (even though i didnt understand it that well, but im gonna do some researches on the web, and some other things.
    can i ask you just another question? when should i set values in pixels?
    Last edited by jedaisoul; 07-02-2014 at 03:36 PM. Reason: lengthy quote deleted

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles