1

Initially I had designed this flash based navigation menu for my website, after going through a flash tutorial. All went well until some of the visitors whom I showed the sample page said that their browser (Internet Explorer) didn't open the menu as they didn't have the flash plugin installed on their systems. So thinking on those lines, may be if more of my website visitors didn't have flash installed on their systems, perhaps they also won't be able to view the menu! And if the navigation menu is inaccessible, the entire website will go awry.

I came across another very good CSS based but VERTICAL menu, working almost the same wayas my flash menu ( BLACK HOVER EFFECT). This is the code:

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 178px;
background-color: #FFFFFF;
}

#coolmenu a{
font: bold 13px Tahoma;
padding: 16px;
padding-center: 0px;
display: block;
width: 100%;
color: 3a403c;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: red;
color: white;
}

</style>

<div id="coolmenu">
<a href="">ABOUT US<br><small> a brief note on our genesis </small></br></a>
<a href="">CONTENT SECTIONS<br><small> what we publish </small></br></a>
<a href="">EDITORIAL BOARD<br><small> fellow comrades </small></br></a>
<a href="">DOWNLOAD<br><small> our magazine archives </small></br></a>
<a href="">CONTACT US <br><small> mailing address </small></br></a>
</div>

But if I wish to use that CSS menu in my website, I need to have it designed horizontally.

I tried to change myself, but failed miserably :( THE menu's width needs to be 665 px and height 48px... each block i.e ABOUT US, CONTENT, DOWNLOAD etc needs to be within 133px sized division, having a thin bar of colour #616060 at the rightend of each block. I managed to have that only for the 1st block i.e ABOUT US But all other menu divisions continue to be placed vertically.

Also as you can see in my flash menu, there I had different font sizes and colour for 01, 02, 03 till 05 (Arial font size 16bold; colour #858383) and different font sizes and colour for the texts "ABOUT US" "CONTENT" DOWNLOAD" "EDITORIAL BOARD" "CONTACT US" (Arial font size 10; colour white)

But here in the CSS, I amn't able to get the different font sizes and colours for the numbers and texts.

This is what I tried doing only with the first block ABOUT US: But as you can see, the font looks so huge... I didn't try that with the other blocks :(

<style type="text/css">

#coolmenu{
width: 665px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: center;

}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 14px Arial;
padding-center: 0px;
display: block;
width: 133px;
color: #858383;
text-decoration: none;
border-right: 1px solid #616060;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

<div id="coolmenu">
<a href=""><font face="Arial" size="16" color=#858383><b>01</b></font><br><font face="Arial" size="10" color="white">ABOUT US</font></br></a>
<a href="">02<br><small> CONTENT SECTIONS </small></br></a>
<a href="">03<br><small> EDITORIAL BOARD </small></br></a>
<a href="">04<br><small> DOWNLOAD PDF</small></br></a>
<a href="">05<br><small> CONTACT US  </small></br></a>
</div>

So please guide me, how to have the similar font styling as in my flash menu and this CSS menu to be horizontal? Thanks in advance.

0

3 Answers 3

1

Is this the effect you want: http://jsfiddle.net/UmpdH/10/ [FINAL UPDATE]

Basically, revise your html, use unordered list <ul> and wrap each anchor with <li>, float to left, and style the elements as you wish.

HTML:

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span><div>01</div>ABOUT US</span></a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span><div>02</div>CONTENT SECTIONS</span></a></li>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span><div>03</div>EDITORIAL BOARD</span></a></li>
    <li><a href="http://www.aamaodisha.org/download.php"><span><div>04</div>DOWNLOAD PDF</span></a></li>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span><div>05</div>CONTACT US</span></a></li>
</ul>​

CSS:

<style type="text/css">

#coolmenu{
width: 670px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: left;
list-style: none;
}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 10px Arial;
padding-center: 0px;
display: block;
/*width: 133px;*/
text-decoration: none;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu li:hover{
background-color: black;
}

#coolmenu li:hover a {color: white;}

#coolmenu li { width: 118px; height: 48px; padding-left: 15px; float: left; border-right: 1px solid #616060; }
#coolmenu li a span { min-width: 50px; display: inline-block; }

#coolmenu li a div { color: #858383; font: bold 16px Arial; text-align: left; }​

</style>

EDIT: The above menu has same effect with the flash menu as seen here: http://www.aamaodisha.org/contact.html

EDIT: final update, text-aligned left, padded-left: 15px

12
  • Thank you so much @Dexter Huinda for taking time and editing this code. Yeah, i want somewhat similar to the one that you have given. I say similar because you have definitely made the vertical menu as a horizontal one. But I am getting black dots (unordered lists) in the final result on the left of each menu item "ABOUT US" or "CONTENT" or DOWNLOAD" etc.. Secondly I want the text colour of the numbers to be the colour as it is now (EVEN BEFORE HOVERING), but the text's colour to be white (BEFORE HOVERING. Can something be done to have two different colours for them? Jun 29, 2012 at 7:06
  • But I really appreciate your help :) Thanks a ton. Atleast you have given me a way forward. Let me again try fiddling around with the codes Jun 29, 2012 at 7:07
  • @AmitPattnaik what text color do you want before and after the hover. please specify. Jun 29, 2012 at 7:29
  • 1
    @AmitPattnaik Okay, since you gave the link to your flash page, here is the exact same style: jsfiddle.net/UmpdH/9 Jun 29, 2012 at 8:02
  • 1
    @AmitPattnaik Always my pleasure to be of help. Here is another version with simple animation effect: jsfiddle.net/UmpdH/21 Jun 30, 2012 at 2:47
1

Here is the complete working code : http://jsfiddle.net/surendraVsingh/UmpdH/17/

HTML

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span>01</span>ABOUT US</a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span>02</span>CONTENT SECTIONS</a>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span>03</span>EDITORIAL BOARD</a>
    <li><a href="http://www.aamaodisha.org/download.php"><span>04</span>DOWNLOAD PDF</a>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span>05</span>CONTACT US</a>
</ul>

CSS:

#coolmenu{
    width: 665px;
    height: 48px;
    margin: 20px auto;
    padding: 0;
    background-color: #CC3300;
    text-align: left;
}

#coolmenu li{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
     width: 133px;
     border-right: 1px solid #616060;
     display:block;
     float:left;
}
#coolmenu li:last-child{border:none;}
#coolmenu span{
    display:block; 
    text-align:left; 
    color: #858383; 
    font-size:15px;
}
#coolmenu a{
    padding:8px 0 8px 5px;
    color: #fff;
    font: bold 11px Arial;
    text-decoration: none;
    display:block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
#coolmenu a:hover{
background-color: #000;
}​
1
  • @Surendraji, I am so sorry, I hadn't seen your reply here. Thanks a ton for the edit. I guess, this -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; are for the slowing down of hover effect, so that the black colour gradually eases in.. right? But will this effect be supported by Internet Explorer versions lesser than 9? But anyway, thank you so much for taking pain and trying out the code. Warm Regards :) Jun 29, 2012 at 9:04
0

You need to use list, which is

<ul>
    <li>
        <a>ETC</a>
        <a>ETC</a>
    </li>
</ul>

and use float: left in css part.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.