Diagonal navigation?

Hello,

I was hoping someone could help me with coding a diagonal navigation bar. I have been teaching myself and I’m still fairly new. I’m not sure how to code this yet.

So far i have a tab like nav bar that doesn’t go to a different page but displays the information below it when clicked. I’d like to make this more of a diagonal with the information to the right.

What I would like to is this (example created in Affinity Designer):

2 Likes

How do you mean?

So you want to make a diagonal navigation bar which displays information next to the arrow?

1 Like

Investigate the CSS transform property. I would advise against shifting from flat to diagonal on click, though. It can surprise the user. Now if your menu was already diagonal and you used a fly-out (say a carefully positioned overlay) then the user would be able to adapt without things jumping around on the screen.

2 Likes

lolfail,

Yes, for the type of website I’m making i want to keep everything to one page. I want the navigation bar to display information to the right when clicked.

Currently I’m using the following codes to create a tab like feature:

https://www.w3schools.com/howto/howto_js_full_page_tabs.asp

Id like to fix this to the left side of the page and have it diagonal if possible.

2 Likes

mtf,

I found the Transform code and have rotated my Nav bar, but I’m struggling with getting it positioned where i’d like it and changing the direction I want the information to appear. Currently it displays it below the tabs. I’d like it to display to the right.

Currently using the code in the link displayed in my other post.

2 Likes

How big should it be? I mean the navigation bar

1 Like

I made it, you can get the code on repl.it

1 Like

I’d like the nav bar to be big enough to hold 6 tabs. Also thank you @lolfail. I’m looking at this right now.

2 Likes

@lolfail, I took a look at the code you shared and after understanding how you had it set up i applied part of it to my code. But I’m now running into a new problem. My first example I shared didn’t display the tabs and colors properly i feel. I should have designed that a little better.

The problem I’m running into is that id like the colored box to align with the Nav/Tab bar. I thought about rotating the box then overriding the the text to align normally, but i feel I’m making that harder then it needs to be.

My html code currently:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">    
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
    
<div class="buttons">
<button class="tablink" onclick="openPage('About',this,'red')" id="defaultOpen"> About</button>  
<button class="tablink" onclick="openPage('Contact',this,'green')"> Contact</button>
<button class="tablink" onclick="openPage('Skills', this, 'blue')"> Skills</button>
<button class="tablink" onclick="openPage('Work',this, 'orange')">Work</button>
<button class="tablink" onclick="openPage('Gallery', this, 'purple')"> Gallery</button>
<button class="tablink" onclick="openPage('Goals', this, 'yellow')">Goals</button>
    </div>
   
    <div class= "texts">
    <div id="About" class="tabcontent">
    <h3> About</h3>
        <p> This page will be about me. Cover letter of sorts</p>
    </div>
    
    <div id="Contact" class="tabcontent">
    <h3> Contact</h3>
        <p> This Tab will be for my contact info and refernces</p>
    </div>
    
    <div id="Skills" class="tabcontent">
    <h3> Skills</h3>
         <ul>
        <li>Proficient with Major Operating Systems and suites (Windows 95-10 and Adobe.) </li>
        <li>Skilled artist in traditional and digital mediums</li>
        <li>Intermediate author</li>
        <li>Excellent soft skills in communication</li> 
        <li>Skilled in business related mathematics</li>
        <li>Skilled in employee supervision and delegation</li>
        <li>Once a week meeting with peers for creativity and conflict resolution exercises.</li>
        <li>Quick assessment of proper tools to resolve situations</li>
        <li>Experienced in character growth and development</li>
        <li>Proficient in researching and note taking</li>
        <li>Intermediate marketing skills</li>
        <li>Knowledgeable in HTML, CSS and JAVAscript</li>
        </ul>
    </div>
    
    <div id="Work" class="tabcontent">
    <h3> Work</h3>
       <p> aldjlajflajlf</p>
    </div>
    
    <div id="Gallery" class="tabcontent">
    <h3> Gallery</h3>
        <p> This tab will display by gallery</p>
    </div>
    
    <div id="Goals" class="tabcontent">
    <h3>Goals</h3>
        <p> this tab will have my achivments.</p>
    </div>
    <div id="logo"> </div>
    </div>
<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html> 


My CSS code plus current preview (Colors will change later)

1 Like

You can set the div’s transform: rotate() property but then you have to set the text’s rotate property to a minus value:

<div id="div"><p id="txt">Hello</p></div>
<style>
  #div {
    transform: rotate(25deg);
    transform-origin: 0% 50%;
    background-color: green;
  }
  #txt {
    transform: rotate(-25deg);
    transform-origin: 0% 50%;
  }

which would look like:
image

Sadly the writing-mode won’t work because it will set it like it is normally but adds the rotating value to it(just in case here is it):

<div id="div"><p id="txt">Hello</p></div>
<style>
  #div {
    transform: rotate(25deg);
    transform-origin: 0% 50%;
    background-color: green;
  }
  #txt {
     writing-mode: horizontal-tb;
  }

The “writing-mode” code didn’t work for me at all. I did how ever find another way to rotate the text a different direction then the box. I may be making this harder then it needs to be though. I also feel like i need to understand the “transform-origin” code better.

I may run some issues later unless this is the is the only spot i use <h3>, <ul> and <p> codes.

1 Like

Understanding transformation is an ongoing skill to develop. You have done remarkably well since the concept first came up.

Visual designs meet the needs of a large share of the audience, but we must never discount the right to accessibility of the audience share that faces some form of impediment to visual media. That’s why we have accessibility guidelines, and in some countries, real laws requiring all government and government contractors to abide by those guidelines.

I only bring this up because while you are exploring the visual channel, one will need to bear in mind how to deliver the same content to those who may not be able to partake the visual presentation.

Granted, this is not the direction you are taking at present, and should not be permitted to sidetrack you. Only know that there is another task awaiting you whence this one is complete.

1 Like