Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS Vertical Navigation Menu!

NiallM1974

NiallM1974

Active Coder
Hi Guys.

Can anyone tell me what the HTML and CSS code is for translating a plain vertical navigation menu into a vertical boxed menu as shown in the screenshots?

Thanks,
Niall
 

Attachments

  • srtc-members-vertical-menu2.jpg
    srtc-members-vertical-menu2.jpg
    41.2 KB · Views: 5
  • srtc-members-vertical-menu.jpg
    srtc-members-vertical-menu.jpg
    52.7 KB · Views: 5
Sort by date Sort by votes
Here's my CSS code so far:

* {
box-sizing: border-box;
}

Body {
background: url(/images/srtc-graphs.jpg);
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
h2{
text-align: center;
font-size: 25px;
color: black;
padding: 20px;
height: 45px;
position: fixed; left: 490px; top: 85px;
}
#navigation {
display: flex;
align-items: center;
background-color: #FFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-bottom: 0.05px solid black;
}
.logo {
margin-left: 40px;
width: 150px;
display: flex;
justify-content: center;
}
.logo img {
height: 58px;
margin-left: 30px;
}
#navigation ul {
margin-left: 20px;
margin: 8px 0;
display: flex;
}
#navigation li {
margin: 20px 0;
}
#navigation a {
margin-left: 20px;
margin: 20px 0;
padding: 8px 16px;
font-family: 'Arial narrow';
font-size: 13px;
font-weight: bold;
color: black;
}
.line {
border-right: 1px solid black;
}
#navigation > p > a {
margin-left: 30px;
margin: 0 40px;
padding: 0;
font-size: 13px;
}
.footer {
font-family: 'Arial';
padding: 15px;
font-size: 15px;
background-color: white;
text-align: center;
border-top: 0.2px solid black;
width: 100%;
}
#page-container {
position: relative;
min-height: 78.2vh;
}
div.a {
height: 565px;
width: 64.1%;
border: 0.2px solid black;
background: white;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
border-color: black;
border-radius: 5px;
}
div.b {
margin: 20px;
padding: 20px;
border: 1px solid #000;
}
 
Upvote 0 Downvote
BGB said:
Paste the html code.
Click to expand...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SRTC Member's Area!</title>
<link rel="stylesheet" type="text/css" href="css\stylemain.css">
</head>
<body>
<div class="navigation-menu">
<div id ="navigation">
<div class="logo">
<img src="images/srtc-logo.jpg">
</div>
<ul>
<li><a href="#home" class="line">Home</a></li>
<li><a href="#bullish" class="line">Most Bullish Shares</a></li>
<li><a href="#bearish" class="line">Most Bearish Shares</a></li>
<li><a href="#irish" class="line">Irish Shares</a></li>
<li><a href="#uk" class="line">UK Shares</a></li>
<li><a href="#euro" class="line">Euro Shares</a></li>
<li><a href="#us" class="line">US Shares</a></li>
<li><a href="#trading" class="line">Trading Room</a></li>
<li><a href="#market">Market Topics</a></li>
</ul>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div id="page-container">
<div class="a">
<h2>WELCOME TO THE MEMBERS AREA!</h2><br>
<p><br>
<div class="b">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a class="active" href="#bullish">Most Bullish Shares</a></li>
<li><a class="active" href="#bearish">Most Bearish Shares</a></li>
<li><a class="active" href="#irish">Irish Shares</a></li>
<li><a class="active" href="#uk">UK Shares</a></li>
<li><a class="active" href="#euro">European Shares</a></li>
<li><a class="active" href="#us">US Shares</a></li>
<li><a class="active" href="#trading">Trading Room</a></li>
<li><a class="active" href="#market">Market Topics</a></li>
</ul>
</div>
</p>
</div>
</div>
<div class="footer">
<div id="footer">
<ul>
<li>Copyright © 2019 All rights reserved | Designed by <u><a href="https://www.cosmicitsolutions.com/">Cosmic IT Solutions</a></u> | Disclaimer</li>
</ul>
</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Here -
CSS:
CSS: 
* {
    box-sizing: border-box;
}

Body {
    background: url(/images/srtc-graphs.jpg);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
#navigation {
    display: flex;
    align-items: center;
    background-color: #FFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-bottom: 0.05px solid black;
}
.logo {
    margin-left: 40px;
    width: 150px;
    display: flex;
    justify-content: center;
}
.logo img {
    height: 58px;
    margin-left: 30px;
}
#navigation ul {
    margin-left: 20px;
    margin: 8px 0;
    display: flex;
}
#navigation li {
    margin: 20px 0;
}
#navigation a {
    margin-left: 20px;
    margin: 20px 0;
    padding: 8px 16px;
    font-family: 'Arial narrow';
    font-size: 13px;
    font-weight: bold;
    color: black;
}
.line {
    border-right: 1px solid black;
}
#navigation > p > a {
    margin-left: 30px;
    margin: 0 40px;
    padding: 0;
    font-size: 13px;
}
#page-container {
    width: 50%;
    margin: 0 auto;
}
.a {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}
.a > h2 {
    margin: 50px 0 10px 0;
    text-align: center;
    font-size: 25px;
    color: black;
    height: 45px;
}
.b {
    display: flex;
    margin: 0 auto;
}
.b > ul {
    padding: 0;
}
.b > ul > li {
    margin: 6px 0;
    display: flex;
    border: 1px solid black;
    box-shadow: 0 2px 3px #999;
}
.b > ul > li > a {
    width: 230px;
    padding: 10px 0;
    padding: 10px 20px;
    color: black;
}
.b > ul > li > a:hover {
    background-color: #E6EAF5;
}
.footer {
    font-family: 'Arial';
    padding: 30px 0;
    font-size: 15px;
    background-color: white;
    text-align: center;
    border-top: 0.2px solid black;
    width: 100%;
}
.footer a {
    color: black;
    text-decoration: underline;
}
HTML:
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>SRTC Member's Area!</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>

<body>
    <div class="navigation-menu">
        <div id ="navigation">
            <div class="logo">
                <img src="logo.jpg">
            </div>
            <ul>
                <li><a href="#home" class="line">Home</a></li>
                <li><a href="#bullish" class="line">Itroduction</a></li>
                <li><a href="#bearish" class="line">Disclaimer</a></li>
                <li><a href="#irish" class="line">Technical Analysis</a></li>
                <li><a href="#uk" class="line">Videos</a></li>
                <li><a href="#euro" class="line">Member's Area</a></li>
                <li><a href="#market">Market Topics</a></li>
            </ul>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>
    </div>
    <div id="page-container">
        <div class="a">
            <h2>WELCOME TO THE MEMBERS AREA!</h2>
            <div class="b">
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a class="active" href="#bullish">Most Bullish Shares</a></li>
                    <li><a class="active" href="#bearish">Most Bearish Shares</a></li>
                    <li><a class="active" href="#irish">Irish Shares</a></li>
                    <li><a class="active" href="#uk">UK Shares</a></li>
                    <li><a class="active" href="#euro">European Shares</a></li>
                    <li><a class="active" href="#us">US Shares</a></li>
                    <li><a class="active" href="#trading">Trading Room</a></li>
                    <li><a class="active" href="#market">Market Topics</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        Copyright © 2019 All rights reserved | Designed by <a href="https://www.cosmicitsolutions.com/">Cosmic IT Solutions</a> | Disclaimer
    </div>
</body>

</html>
 

Attachments

  • STC.jpg
    STC.jpg
    87.4 KB · Views: 3
Upvote 0 Downvote
BGB said:
Here -
CSS:
CSS: 
* {
    box-sizing: border-box;
}

Body {
    background: url(/images/srtc-graphs.jpg);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
#navigation {
    display: flex;
    align-items: center;
    background-color: #FFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-bottom: 0.05px solid black;
}
.logo {
    margin-left: 40px;
    width: 150px;
    display: flex;
    justify-content: center;
}
.logo img {
    height: 58px;
    margin-left: 30px;
}
#navigation ul {
    margin-left: 20px;
    margin: 8px 0;
    display: flex;
}
#navigation li {
    margin: 20px 0;
}
#navigation a {
    margin-left: 20px;
    margin: 20px 0;
    padding: 8px 16px;
    font-family: 'Arial narrow';
    font-size: 13px;
    font-weight: bold;
    color: black;
}
.line {
    border-right: 1px solid black;
}
#navigation > p > a {
    margin-left: 30px;
    margin: 0 40px;
    padding: 0;
    font-size: 13px;
}
#page-container {
    width: 50%;
    margin: 0 auto;
}
.a {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}
.a > h2 {
    margin: 50px 0 10px 0;
    text-align: center;
    font-size: 25px;
    color: black;
    height: 45px;
}
.b {
    display: flex;
    margin: 0 auto;
}
.b > ul {
    padding: 0;
}
.b > ul > li {
    margin: 6px 0;
    display: flex;
    border: 1px solid black;
    box-shadow: 0 2px 3px #999;
}
.b > ul > li > a {
    width: 230px;
    padding: 10px 0;
    padding: 10px 20px;
    color: black;
}
.b > ul > li > a:hover {
    background-color: #E6EAF5;
}
.footer {
    font-family: 'Arial';
    padding: 30px 0;
    font-size: 15px;
    background-color: white;
    text-align: center;
    border-top: 0.2px solid black;
    width: 100%;
}
.footer a {
    color: black;
    text-decoration: underline;
}
HTML:
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>SRTC Member's Area!</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>

<body>
    <div class="navigation-menu">
        <div id ="navigation">
            <div class="logo">
                <img src="logo.jpg">
            </div>
            <ul>
                <li><a href="#home" class="line">Home</a></li>
                <li><a href="#bullish" class="line">Itroduction</a></li>
                <li><a href="#bearish" class="line">Disclaimer</a></li>
                <li><a href="#irish" class="line">Technical Analysis</a></li>
                <li><a href="#uk" class="line">Videos</a></li>
                <li><a href="#euro" class="line">Member's Area</a></li>
                <li><a href="#market">Market Topics</a></li>
            </ul>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>
    </div>
    <div id="page-container">
        <div class="a">
            <h2>WELCOME TO THE MEMBERS AREA!</h2>
            <div class="b">
                <ul>
                    <li><a class="active" href="#home">Home</a></li>
                    <li><a class="active" href="#bullish">Most Bullish Shares</a></li>
                    <li><a class="active" href="#bearish">Most Bearish Shares</a></li>
                    <li><a class="active" href="#irish">Irish Shares</a></li>
                    <li><a class="active" href="#uk">UK Shares</a></li>
                    <li><a class="active" href="#euro">European Shares</a></li>
                    <li><a class="active" href="#us">US Shares</a></li>
                    <li><a class="active" href="#trading">Trading Room</a></li>
                    <li><a class="active" href="#market">Market Topics</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        Copyright © 2019 All rights reserved | Designed by <a href="https://www.cosmicitsolutions.com/">Cosmic IT Solutions</a> | Disclaimer
    </div>
</body>

</html>
Click to expand...
The only thing missing is the container box that the menu heading and the vertical menu itself
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom