Java and css help

FirefighterKyle

FirefighterKyle

I am Kyle!!
Sep 14, 2012
162
7
Hello everyone I have been working on a site for myself for a good 4 hours. I ran across some problems but fixed most of it if you wish to view my failure in the beginning feel free to scroll to the bottom. (I am leaving it up so other can see what I have redone etc so hopefully it will help them also.)

So lets kick off from here.
I am still running into one error which I can not seem to fix but I guess with time I will figure it out if no one steps in to assist me but either way here is my Style, Script, HTML, and some pictures of it all also.

Code: 
<style>
.container {
    display: inline-block;
    cursor: pointer;
    float: right;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.4s;
   
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 4px) ;
    transform: rotate(-45deg) translate(-8px, 4px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -6px) ;
    transform: rotate(45deg) translate(-8px, -6px) ;
}

.icon-bar {
   
    transition: all 0.3s ease;
    color: black;
    font-size: 16px;
    float: right;
    margin-right: 4px;

}
   
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.tab li {float: right;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}





/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    float: right;
}

.topright {
 float: right;
 cursor: pointer;
 font-size: 20px;
}

.topright:hover {color: red;}
</style>

Code: 
<script>
function myFunction(x) {
    x.classList.toggle("change");
}

</script>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}


</script>

HTML: 
<body>

    <img src="{url}/app/tpl/skins/Web/template/image/logo.png" style="float:left;"></img>
    <div class="container" onclick="myFunction(this);openCity(event, 'Phone');">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
    </div>
    <i class="fa fa-phone icon-bar"> Phone numbers</i>
    <ul class="tab">



<div id="Phone" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="bar1 bar3">_______</span>
  <h3>Area / Place</h3>
  <p>This number is?</p>
</div>

So that is all the codes out of the way!
Here are some images of it sort of working.
31b64009b8914c68b3f01d0bc98378ca.png




7e3c134e42e549a0a58a42e6cb77fecf.png

As you can see it shows up now when I click the menu bar, only problem now is when I click the menu x it does not close it which I am trying to do. I have to click the dark gray underline (what I want to remove and avoid). Also would like to know how to make it so the h3 and text, go below the menu X. Once again thanks for viewing and for the help.















Old stuff​
Alright so I am working on a site trying to make it professional which is my first mistake haha. Anyways, I am trying to make a 3 dash menu line which I have made, I am trying to make it so if you click it, it will show a text etc.

Also want to know how to make the image / logo type thing to fit next to it.

a7a43bed343b42338b775071b1407ee1.png
So here is the image of what I am working on.

I need help with the phone icon with the text (Phone numbers) next to the menu to the left preferably
also want to know how to hide the Place/Area with the phone # until you click on the menu.

.container {
display: inline-block;
cursor: pointer;
float: right;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 4px 0;
transition: 0.4s;

}

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 4px) ;
transform: rotate(-45deg) translate(-9px, 4px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -6px) ;
transform: rotate(45deg) translate(-8px, -6px) ;
}

.icon-bar {

transition: all 0.3s ease;
color: white;
font-size: 46px;

function myFunction(x) {
x.classList.toggle("change");
var i, tabcontent, tablinks;


document.getElementById(phone).style.display = "block";
evt.currentTarget.className += " active";
}

Also here is the extra links etc etc.
<link rel="stylesheet" href="
You must be registered for see links
">

Then here is my html codes.
HTML: 
<div class="container" onclick="myFunction(this)"><i class="fa fa-phone"> Phone numbers</i>
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
    <h3>Place/Area</h3>
  <p>Phone #</p>
    </div>



_______________________________________________________________________________________________________________Update
New Styles
Code: 
<style>
.container {
    display: inline-block;
    cursor: pointer;
    float: right;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.4s;

}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 4px) ;
    transform: rotate(-45deg) translate(-8px, 4px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -6px) ;
    transform: rotate(45deg) translate(-8px, -6px) ;
}

.icon-bar {

    transition: all 0.3s ease;
    color: white;
    font-size: 46px;
}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.tab li {float: right;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}





/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
}

.topright {
 float: right;
 cursor: pointer;
 font-size: 20px;
}

.topright:hover {color: red;}
</style>

Redone Script
Code: 
<script>
function myFunction(x) {
    x.classList.toggle("change");
}

</script>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}


</script>

New Html
HTML: 
<div class="container" onclick="myFunction(this)" ><i class="fa fa-phone"> Phone number</i>
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
    </div>

    <ul class="tab">

  <li><a href="javascript:void(0)"  onclick="openCity(event, 'Phone')">Area</a></li>
</ul>



<div id="Phone" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Area</h3>
  <p>Phone number.</p>
</div>

The link stayed the same.

Alright so tried to redo somethings,
d0ba6d99ded44845880c4a307d2d4617.png
So still couldn't figure out how to move the telephone icon with the text (Phone numbers) to the left next to the menu. Also have a link Phone there for a drop thing.

So my 3 dash menu has a function which turns into an X. What I want to do is remove the link Phone and have it so you can click the menu and it will show the text without having the link Phone to show it.

44043cfe0118418891bf67e723305dbc.png

That is with me clicking the Phone what is to the left of the menu which I am trying to make it so the phone icon with the text (Phone number) there.

Also that is what it does when I click the link Phone it will show that h2 + text which I just want to click the menu to do that with out that little x in the right corner.

Here is a picture of what my menu does.
1d7fa404f76c45ebaea071df7d9786ca.png


So as I said many times which I apologize for, is that I am trying to make it so I can just click the menu to show the Area / Place with the text (the number is?)

Then when you click the menu what turned into an x it will make the h2 + text disappear.
I know it's a lot to read but thank you for anyone who can assist me.
 
Last edited:
Sort by date Sort by votes

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top