עזרה ב HTML, CSS, JS הגדרה של תת תפריט נפתח

D

DH778

New member
אוקיי, זה עם המינימום קוד

השארתי מינימום קוד ב css , (מה שהצלחתי לעשות) וחילקתי אותו לחלקים כדי שזה יהיה ברור מה שייך למה.

קוד: 
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link href="[URL]https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css[/URL]" rel="stylesheet">
</head>
<body dir="rtl">
	<nav>
		<div class="menu-icon">
			<i class="fa fa-bars fa-2x"></i>
		</div>
    <div class="manu">
          <ul>
						<li class="logo"><a href="#"><img src="img/logo.png" alt="logo" width="70px" heigth="50px"></a></li>
            <li><a href="#">home</a></li>
              <li><a href="#">work</a>
							<div class="row">
								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>

								<div class="col-sm-3">
									<div class="work-content">
					    			<h2> content 1 </h2>
					    			<ul>
					    				<li> link 1 </li>
					    				<li> link 2 </li>
					    				<li> link 3 </li>
					    				<li> link 4 </li>
					    			</ul>
									</div>
					    	</div>
							</li>
            	<li><a href="#">about</a></li>
            	<li><a href="#">contact</a></li>
          </ul>
      	</div>
			</div>
	</nav>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

קוד: 
body {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

nav li.logo:hover {
	background-color: transparent;
}

ul {
	margin: 0;
	padding: 0;
	background-color: #00695c;
	text-align: center;
	position: relative;
}

ul li:hover {
	background-color: #00897b;
}

/* ---------- main menu --------- */

ul li a {
	text-decoration: none;
	color: #fff;
	padding: 15px;
	display: block;
}


/* ---------- sub menu --------- */

ul li {
	display: inline-block;
}

ul ul {
	position: absolute;
}

ul ul li {
	display: block;
	padding: 15px;
}


/* ---------- hamburger icon --------- */

nav div.menu-icon {
	display: none;
	background-color: #000;
	color: #fff;
	text-align: left;
	padding: 10px;
	cursor: pointer;
}

/* ---------- responsive menu --------- */

@media (max-width: 480px) {
	nav div.menu-icon {
		display: block;
	}

ul {
		/* display: none; */
		position: static;
		padding-top: 5px;
	}

h2 {
	margin: 0;
	tex
 
ע

עוץליגוץלי

New member
עדיין יש שגיאות בקוד

כמו גם תגיות link שמכילות הפנייה לגליונות סגנון (שעלולים להתנגש אם מה שרצית).

בכל אופן, כמה שאלות על הקוד לפני שאני ממשיך לקרוא.

לשם מה הריצוף של כל הdivים?
קוד: 
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="work-content">
אתה משתמש בהם לצבעים? למסגרות? אנסה מאוחר יותר להעלות קוד שמבוסס על הקוד שלך, ונותן את מה שרצית.

מה משמעות הרשימה ה"חיצונית"? הרשימה שמכילה לוגו, קישור, וdiv שמכיל רשימות נוספות?
 
ע

עוץליגוץלי

New member
לקחתי את הקוד, ניקיתי אותו ממה שנראה לי מיותר,

הוספתי 4 שורות של CSS - וכעת בוא נראה מה חסר ונוסיף לאט לאט.

קוד: 
<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8">
		<style>
			img.imgLogo { width:70px;  height:90px; display:inline-block; }
			div.row { background-color:#a0a0a0; }
			div.work-content { display:inline-block; width:32%; min-width:240px; }
		</style>
    </head>
    <body dir="rtl">
        <nav>
            <div class="menu-icon">
                <i class="fa fa-bars fa-2x"></i>
            </div>
            <div class="manu">
                    <a href="#" class='logo'><img src="img/logo.png" alt="logo" class='imgLogo'></a>
                    <a href="#">home</a>
                        <a href="#">work</a>
                        <div class="row">
                                <div class="work-content">
                                    <h2> content 1 </h2>
                                    <ul>
                                        <li> link 1 </li>
                                        <li> link 2 </li>
                                        <li> link 3 </li>
                                        <li> link 4 </li>
                                    </ul>
                                </div>
                                <div class="work-content">
                                    <h2> content 1 </h2>
                                    <ul>
                                        <li> link 1 </li>
                                        <li> link 2 </li>
                                        <li> link 3 </li>
                                        <li> link 4 </li>
                                    </ul>
                                </div>
                                <div class="work-content">
                                    <h2> content 1 </h2>
                                    <ul>
                                        <li> link 1 </li>
                                        <li> link 2 </li>
                                        <li> link 3 </li>
 &nb
 
D

DH778

New member
אולי לא אמרתי את זה

אבל תודה, תודה רבה על העזרה שלך
 
D

DH778

New member
האמת שחשבתי שעוד לא העלת

אוקיי, אין בעיה, מתי שזה יהיה, הכל בסדר, תודה
 
D

DH778

New member
הסתכלתי בקוד עכשיו

הורדת דברים שחשבת שהם מיותרים, השאלה האם מה שעשית יוכל להיות בצורה שרציתי ושאני צריך שזה יהיה בנוי, כלומר תפריט ותפריט נסתר, ורק כשעוברים על טקסט מסויים הוא נפתח, ואז מראה את התפריט הזה שעשית בצורה הזאת.
 
D

DH778

New member
כל התפריט שנמצא במלבן האפור - זה נסתר

ורק כשעוברים על work הוא צריך להיות מוצג
 
D

DH778

New member
בקוד שצירפתי בהודעה הראשונה

אתה יכול לראות איך זה בנוי, יש אפשרות לחבר בין הקוד שלך לקוד הזה שצירפתי?, שזה יהיה בנוי ככה, בצורה הזאת איך שהתפריט נראה ופועל - כלומר נפתח, ואז הקוד שלך יהיה בפנים בתפריט הנעלם.
 
D

DH778

New member
אדם אחר הגיב פה - אוסנת

והציעה לעשות עם bootstrap אז ניסיתי גם את זה, חשבתי אולי זה יעבוד..
הרשימה החיצונית היא למטרה של (גם) למובייל - הלוגו צריך להופיע גם במצב דסקטופ לצד התפריט, וגם במצב מובייל בשורה של האייקון ההמבורגר, וכן, אני יודע שיש בעיות גם בזה, ולא רק בלוגו, זה כבר בעיות של JS, וזה באמת כבר אין לי ידע, ולא יודע איך לטפל בזה.
 
א

אוסנתס

New member
מה התוצאה כרגע?

לפי התמונה של התפריט אמורות להיות לך 2 שורות בכל אחת 4 עמודות.
לפי הקוד יש שורה אחת.
לא הבנתי מה הבעייה עם הלוגו (האם הכוונה לאייקון של ההמבורגר?)

איפה הוא מופיע לך כרגע?
לא הכל בעיות של js פשוט ה- bootstrap היא ספרייה מוכנה כדי שלא יצרכו לכתוב קוד לכל גודל של מכשיר, אבל לא נראה לי שבקוד אחד אפשר לכסות את כל המקרים. עדיין עדיף על כתיבה של קוד לכל גודל של מכשיר.
 
D

DH778

New member
התוצאה כרגע שעדיין זה לא שם

אבל אני מקווה שזה יהיה.
אוקיי אני אעשה לך סדר, בתמונה נכון, יש רק 2 שורות ו 4 עמודות, אבל זה רק לשם הדוגמא, בפועל צריכים להיות יותר, אבל אמרתי אם ה - 2 שורות האלה יסתדרו, אז לא תהיה בעיה אחר כך להוסיף.
בגדול אני צריך כמה דברים שיפעלו בו זמנית - תפריט דסקטופ עם תת תפריט נפתח, שבתוכו יהיו 4 שורות ו X עמודות לפי שימוש .
תפריט מובייל, שפה אני יודע שזה בעיית JS כי הוא עובד כמו שצריך - נפתח ונסגר, אבל אם רוצים ללחוץ על לינק כלשהו, אז במקום שזה נגיד יעשה מה שזה צריך לעשות , הלינק סוגר את התפריט, הוא לא קולט אותו כלינק אינדיוידואלי .
עכשיו הדוגמא שצירפתי בהודעה הראשונה עושה רק חלקית : תפריט דסקטופ עובד, תת תפריט עובד - אבל חלקית, ותפריט מובייל עובד - אבל חלקית.
ולגבי הלוגו, לא, אני לא מתכון ללוגו של האייקון של ההמבורגר, אלא ללוגו עצמו.
אני רוצה שהלוגו יהיה באותו שורה עם האייקון של ההמבורגר.
כרגע הלוגו עצמו מופיע מתחת לשורה עם האייקון של ההמבורגר, כלומר הוא נמצא בתוך התפריט ולא על התפריט.
 
א

אוסנתס

New member
מתייחסת רגע רק ל- desktop

מה עובד חלקית בתת תפריט?
אולי תנסה את הקוד הבא.
לבדוק אם עובד בשתי שורות. אני הייתי מנסה להשתמש כמה שיותר ב- bootsrap ולמצות אותו .
קוד: 
<div class="row">
 <div class="col-sm-2">logo...</div>
 <div class="col-sm-8">lo meshane...</div>
 <div class="col-sm-2">icon hamburger...</div>
</div>

<div class="row">
 <div class="col-sm-3">menu...</div>
 <div class="col-sm-3">menu...</div>
 <div class="col-sm-3">menu...</div>
 <div class="col-sm-3">menu...</div>
</div>
 
D

DH778

New member
אני מצרף 2 תמונות שתראי

תמונה מספר 1 - זה עם הקוד שלך, זה מה שאני רואה בפועל.
תמונה מספר 2 - זה עם הקוד שלי, (שעובד חלקית) זה מה שאני רואה בפועל.



 
א

אוסנתס

New member
כתבתי את הקוד הזה. הוא בעייתי לך?

קוד: 
       <script>
           var row = 1;
           var col = 1;
           var id = 0;
           for (row = 1; row <= 2; row++) {
               
               document.write("<div class='row'>");
               
                for (col  = 1; col <= 4; col++) {                   
                    id++;
                    document.write(

                        "<div class ='col-sm-3'>" +
                        "<div onclick = 'setVisibility(" + id + ")' style= ' border: solid black 1px; background-color:cornflowerblue' > Category</div>" +
                        "<div id = '" + id + "' style = 'display:none'>" +
                        "<div>Pizza</div>" +
                        "<div>Pasta</div>" +
                        "<div>Pesce</div>" +
                        "</div></div>");
                }
                document.write("</div>");           
                

            }

           function setVisibility(id) {

               var sub_menu = document.getElementById(id);
               if (sub_menu.style.display == "none")
                   sub_menu.style.display = "inline";
               else
                   sub_menu.style.display = "none";
           }
       
        </script>
  
<script>
    
        
    
</script>
 
D

DH778

New member
הוא קצת בעייתי בשבילי

אני מסתכל על הקוד ולא כל כך מצליח להבין אותו, אני צריך לעשות הפרדה בקוד? כלומר לחלק את הקוד שחלק אחד ילך ל - html וחלק אחר ל - css וחלק אחר ל - js?
 
You must log in or register to reply here.

Copyright©1996-2021,Tapuz Media Ltd. Forum software by XenForo® © 2010-2020 XenForo Ltd.

למעלה