Reply to thread

Message

<blockquote data-quote="FirefighterKyle" data-source="post: 396696" data-attributes="member: 22469">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.[SPOILER=&quot;Style&quot;][CODE]&lt;style&gt;.container {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; float: right;}.bar1, .bar2, .bar3 {&nbsp; &nbsp; width: 35px;&nbsp; &nbsp; height: 5px;&nbsp; &nbsp; background-color: #333;&nbsp; &nbsp; margin: 4px 0;&nbsp; &nbsp; transition: 0.4s;&nbsp;&nbsp; }.change .bar1 {&nbsp; &nbsp; -webkit-transform: rotate(-45deg) translate(-8px, 4px) ;&nbsp; &nbsp; transform: rotate(-45deg) translate(-8px, 4px) ;}.change .bar2 {opacity: 0;}.change .bar3 {&nbsp; &nbsp; -webkit-transform: rotate(45deg) translate(-8px, -6px) ;&nbsp; &nbsp; transform: rotate(45deg) translate(-8px, -6px) ;}.icon-bar {&nbsp;&nbsp; &nbsp; &nbsp; transition: all 0.3s ease;&nbsp; &nbsp; color: black;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; float: right;&nbsp; &nbsp; margin-right: 4px;}&nbsp;&nbsp; ul.tab {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; 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 {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; color: black;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 14px 16px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-size: 17px;}/* Style the tab content */.tabcontent {&nbsp; &nbsp; display: none;&nbsp; &nbsp; padding: 6px 12px;&nbsp; &nbsp; float: right;}.topright {&nbsp;float: right;&nbsp;cursor: pointer;&nbsp;font-size: 20px;}.topright:hover {color: red;}&lt;/style&gt;[/CODE][/SPOILER][SPOILER=&quot;Script&quot;][CODE]&lt;script&gt;function myFunction(x) {&nbsp; &nbsp; x.classList.toggle(&quot;change&quot;);}&lt;/script&gt;&lt;script&gt;function openCity(evt, cityName) {&nbsp; &nbsp; var i, tabcontent, tablinks;&nbsp; &nbsp; tabcontent = document.getElementsByClassName(&quot;tabcontent&quot;);&nbsp; &nbsp; for (i = 0; i &lt; tabcontent.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; tabcontent[i].style.display = &quot;none&quot;;&nbsp; &nbsp; }&nbsp; &nbsp; tablinks = document.getElementsByClassName(&quot;tablinks&quot;);&nbsp; &nbsp; for (i = 0; i &lt; tablinks.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; tablinks[i].className = tablinks[i].className.replace(&quot; active&quot;, &quot;&quot;);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById(cityName).style.display = &quot;block&quot;;&nbsp; &nbsp; evt.currentTarget.className += &quot; active&quot;;}&lt;/script&gt;[/CODE][/SPOILER][SPOILER=&quot;HTML&quot;][HTML]&lt;body&gt;&nbsp; &nbsp; &lt;img src=&quot;{url}/app/tpl/skins/Web/template/image/logo.png&quot; style=&quot;float:left;&quot;&gt;&lt;/img&gt;&nbsp; &nbsp; &lt;div class=&quot;container&quot; onclick=&quot;myFunction(this);openCity(event, 'Phone');&quot;&gt;&nbsp; &lt;div class=&quot;bar1&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar2&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar3&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;i class=&quot;fa fa-phone icon-bar&quot;&gt; Phone numbers&lt;/i&gt;&nbsp; &nbsp; &lt;ul class=&quot;tab&quot;&gt;&lt;div id=&quot;Phone&quot; class=&quot;tabcontent&quot;&gt;&nbsp; &lt;span onclick=&quot;this.parentElement.style.display='none'&quot; class=&quot;bar1 bar3&quot;&gt;_______&lt;/span&gt;&nbsp; &lt;h3&gt;Area / Place&lt;/h3&gt;&nbsp; &lt;p&gt;This number is?&lt;/p&gt;&lt;/div&gt;[/HTML][/SPOILER]So that is all the codes out of the way!Here are some images of it sort of working.<img src="http://image.prntscr.com/image/31b64009b8914c68b3f01d0bc98378ca.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="http://image.prntscr.com/image/7e3c134e42e549a0a58a42e6cb77fecf.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />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 stuffAlright 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,&nbsp; 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.<img src="http://image.prntscr.com/image/a7a43bed343b42338b775071b1407ee1.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />&nbsp; 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 preferablyalso want to know how to hide the Place/Area with the phone # until you click on the menu.[SPOILER=&quot;Style Codes&quot;].container {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; float: right;}.bar1, .bar2, .bar3 {&nbsp; &nbsp; width: 35px;&nbsp; &nbsp; height: 5px;&nbsp; &nbsp; background-color: #333;&nbsp; &nbsp; margin: 4px 0;&nbsp; &nbsp; transition: 0.4s;}.change .bar1 {&nbsp; &nbsp; -webkit-transform: rotate(-45deg) translate(-9px, 4px) ;&nbsp; &nbsp; transform: rotate(-45deg) translate(-9px, 4px) ;}.change .bar2 {opacity: 0;}.change .bar3 {&nbsp; &nbsp; -webkit-transform: rotate(45deg) translate(-8px, -6px) ;&nbsp; &nbsp; transform: rotate(45deg) translate(-8px, -6px) ;}.icon-bar {&nbsp; &nbsp; transition: all 0.3s ease;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-size: 46px;[/SPOILER][SPOILER=&quot;Script Code&quot;]function myFunction(x) {&nbsp; &nbsp; x.classList.toggle(&quot;change&quot;);&nbsp; &nbsp; var i, tabcontent, tablinks;&nbsp; &nbsp; document.getElementById(phone).style.display = &quot;block&quot;;&nbsp; &nbsp; evt.currentTarget.className += &quot; active&quot;;}[/SPOILER]Also here is the extra links etc etc.[SPOILER=&quot;links&quot;]&lt;link rel=&quot;stylesheet&quot; href=&quot;<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css</a>&quot;&gt;[/SPOILER]Then here is my html codes.[SPOILER=&quot;Html&quot;][HTML]&lt;div class=&quot;container&quot; onclick=&quot;myFunction(this)&quot;&gt;&lt;i class=&quot;fa fa-phone&quot;&gt; Phone numbers&lt;/i&gt;&nbsp; &lt;div class=&quot;bar1&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar2&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar3&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;h3&gt;Place/Area&lt;/h3&gt;&nbsp; &lt;p&gt;Phone #&lt;/p&gt;&nbsp; &nbsp; &lt;/div&gt;[/HTML][/SPOILER]_______________________________________________________________________________________________________________UpdateNew Styles [SPOILER=&quot;Style&quot;][CODE]&lt;style&gt;.container {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; float: right;}.bar1, .bar2, .bar3 {&nbsp; &nbsp; width: 35px;&nbsp; &nbsp; height: 5px;&nbsp; &nbsp; background-color: #333;&nbsp; &nbsp; margin: 4px 0;&nbsp; &nbsp; transition: 0.4s;}.change .bar1 {&nbsp; &nbsp; -webkit-transform: rotate(-45deg) translate(-8px, 4px) ;&nbsp; &nbsp; transform: rotate(-45deg) translate(-8px, 4px) ;}.change .bar2 {opacity: 0;}.change .bar3 {&nbsp; &nbsp; -webkit-transform: rotate(45deg) translate(-8px, -6px) ;&nbsp; &nbsp; transform: rotate(45deg) translate(-8px, -6px) ;}.icon-bar {&nbsp; &nbsp; transition: all 0.3s ease;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-size: 46px;}ul.tab {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; 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 {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; color: black;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 14px 16px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-size: 17px;}/* Style the tab content */.tabcontent {&nbsp; &nbsp; display: none;&nbsp; &nbsp; padding: 6px 12px;}.topright {&nbsp;float: right;&nbsp;cursor: pointer;&nbsp;font-size: 20px;}.topright:hover {color: red;}&lt;/style&gt;[/CODE][/SPOILER]Redone Script [SPOILER=&quot;Script&quot;][CODE]&lt;script&gt;function myFunction(x) {&nbsp; &nbsp; x.classList.toggle(&quot;change&quot;);}&lt;/script&gt;&lt;script&gt;function openCity(evt, cityName) {&nbsp; &nbsp; var i, tabcontent, tablinks;&nbsp; &nbsp; tabcontent = document.getElementsByClassName(&quot;tabcontent&quot;);&nbsp; &nbsp; for (i = 0; i &lt; tabcontent.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; tabcontent[i].style.display = &quot;none&quot;;&nbsp; &nbsp; }&nbsp; &nbsp; tablinks = document.getElementsByClassName(&quot;tablinks&quot;);&nbsp; &nbsp; for (i = 0; i &lt; tablinks.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; tablinks[i].className = tablinks[i].className.replace(&quot; active&quot;, &quot;&quot;);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById(cityName).style.display = &quot;block&quot;;&nbsp; &nbsp; evt.currentTarget.className += &quot; active&quot;;}&lt;/script&gt;[/CODE][/SPOILER]New Html [SPOILER=&quot;HTML&quot;][HTML]&lt;div class=&quot;container&quot; onclick=&quot;myFunction(this)&quot; &gt;&lt;i class=&quot;fa fa-phone&quot;&gt; Phone number&lt;/i&gt;&nbsp; &lt;div class=&quot;bar1&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar2&quot;&gt;&lt;/div&gt;&nbsp; &lt;div class=&quot;bar3&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;ul class=&quot;tab&quot;&gt;&nbsp; &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&nbsp; onclick=&quot;openCity(event, 'Phone')&quot;&gt;Area&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id=&quot;Phone&quot; class=&quot;tabcontent&quot;&gt;&nbsp; &lt;span onclick=&quot;this.parentElement.style.display='none'&quot; class=&quot;topright&quot;&gt;x&lt;/span&gt;&nbsp; &lt;h3&gt;Area&lt;/h3&gt;&nbsp; &lt;p&gt;Phone number.&lt;/p&gt;&lt;/div&gt;[/HTML][/SPOILER]The link stayed the same.Alright so tried to redo somethings,&nbsp;<img src="http://image.prntscr.com/image/d0ba6d99ded44845880c4a307d2d4617.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />&nbsp; &nbsp; 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.<img src="http://image.prntscr.com/image/44043cfe0118418891bf67e723305dbc.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />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.<img src="http://image.prntscr.com/image/1d7fa404f76c45ebaea071df7d9786ca.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />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.&nbsp;I know it's a lot to read but thank you for anyone who can assist me.</blockquote>

[QUOTE="FirefighterKyle, post: 396696, member: 22469"] 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. [SPOILER="Style"] [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] [/SPOILER] [SPOILER="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>[/CODE] [/SPOILER] [SPOILER="HTML"] [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> Phone numbers <ul class="tab"> <div id="Phone" class="tabcontent"> _______ <h3>Area / Place</h3> This number is? </div>[/HTML] [/SPOILER] So that is all the codes out of the way! Here are some images of it sort of working. [IMG]http://image.prntscr.com/image/31b64009b8914c68b3f01d0bc98378ca.png[/IMG] [IMG]http://image.prntscr.com/image/7e3c134e42e549a0a58a42e6cb77fecf.png[/IMG] 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. [CENTER][B]Old stuff[/B][/CENTER] 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. [IMG]http://image.prntscr.com/image/a7a43bed343b42338b775071b1407ee1.png[/IMG] 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. [SPOILER="Style Codes"] .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; [/SPOILER] [SPOILER="Script Code"] function myFunction(x) { x.classList.toggle("change"); var i, tabcontent, tablinks; document.getElementById(phone).style.display = "block"; evt.currentTarget.className += " active"; } [/SPOILER] Also here is the extra links etc etc. [SPOILER="links"]<link rel="stylesheet" href="[URL]https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css[/URL]">[/SPOILER] Then here is my html codes. [SPOILER="Html"] [HTML]<div class="container" onclick="myFunction(this)"> Phone numbers <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <h3>Place/Area</h3> Phone # </div>[/HTML] [/SPOILER] _______________________________________________________________________________________________________________[B]Update[/B] New Styles [SPOILER="Style"] [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>[/CODE] [/SPOILER] Redone Script [SPOILER="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>[/CODE] [/SPOILER] New Html [SPOILER="HTML"] [HTML]<div class="container" onclick="myFunction(this)" > Phone number <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"> x <h3>Area</h3> Phone number. </div>[/HTML] [/SPOILER] The link stayed the same. Alright so tried to redo somethings, [IMG]http://image.prntscr.com/image/d0ba6d99ded44845880c4a307d2d4617.png[/IMG] 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. [IMG]http://image.prntscr.com/image/44043cfe0118418891bf67e723305dbc.png[/IMG] 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. [IMG]http://image.prntscr.com/image/1d7fa404f76c45ebaea071df7d9786ca.png[/IMG] 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. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members